如何使用相同的名称类,但使用不同的样式

Question

看到例子来理解:

    <!--Standard Bootstrap -->
    <link href="/build/css/site/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="/build/css/site/mdb.min.css" rel="stylesheet">

所以我想要一个类似的东西:

    <div class="btn btn-danger" >Standard Bootstrap Button</div>
    <div class="btn btn-danger" >Material Design Bootstrap Button</div>

类的名称是相同的.但它们分为两种不同的风格.我怎么能像我说的那样使用这两种款式？

请原谅我糟糕的英语.

Answer 1

你不能,你将永远得到班级的最后定义.这就是样式表的工作方式,这就是为什么它们被称为CASCADING Stylesheets.所以基本上你在mdb.min.css中定义的内容扩展或覆盖了bootstrap.min.css中定义的内容而你将获得两者的组合

让我们在bootstrap.min.css中说你有这个:

btn-danger:{
   color:#FF0000;
   width:100px;
}

在mdb.min.cs你有

btn-danger:{
   background-color:#00FF00;
   width:120px;
}

您的浏览器会解释这个:

btn-danger:{
   color:#FF0000;
   background-color:#00FF00;
   width:120px;
}

宽度将被mdb.min.css覆盖,因为最后添加了一个,后面添加样式表,它的优先级越高,因此它将覆盖之前定义的所有内容,并扩展尚未定义的所有内容.更早,并合并其他一切