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

【问题标题】：How to use the same name classes but in separate styles如何使用相同名称但样式不同的类
【发布时间】：2017-12-10 00:35:14
【问题描述】：

看例子就明白了：

    <!--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>

类的名称相同。但它们有两种不同的风格。我说的这两种风格怎么用？

请原谅我的英语不好。

【问题讨论】：

How to apply different CSS styles to 2 elements with the same class name?的可能重复
@Bharath-Shetty 感谢您的评论。但你不明白我的意思。
所以，您有两个样式表，它们的选择器具有不同的属性值，并且您想知道如何应用一个或另一个样式表中的样式？
不可能！ Bharath 为您提供了如何使用包装器的链接。没有它，您根本无法说出该类来自哪个文件。它应用给定类名的最后定义样式。
我想你的意思是stackoverflow.com/questions/2417287/…

标签： html css sass less

【解决方案1】：

你不能，你总是会得到类的最后一个定义。这就是样式表的工作原理，这就是它们被称为 CASCADING 样式表的原因。所以基本上你在 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 覆盖，因为那个是最后添加的，越晚添加样式表，它的优先级越高，因此它将覆盖之前定义的所有内容, 并 extend 之前未定义的所有内容，并 merge 其他所有内容

【讨论】：

【解决方案2】：

浏览器的样式表
包含在<link> 标签中
嵌套在<head><style>标签中
内联，例如<a style="display: none">

这是在文档中加载级联样式表的顺序。您可以在任何地方扩展任何类的样式，但不能定义两个具有不同样式的同名类。它将按给定顺序覆盖。

【讨论】：

【解决方案3】：

如果使用 SCSS 是一个选项，您可以创建一个文件来导入这两个文件，但将每个文件包装在自己的命名空间中。比如：

.bootstrap {
    @import 'bootstrap.min.css';
}

.mdb {
    @import 'mdb.min.css';
}

此文件应与bootstrap.min.css 和mdb.min.css 位于同一目录中，并且应具有.scss 扩展名。通过SCSS compiler 运行上述操作后，您将拥有一个可以链接到HTML 文件中的CSS 文件，而不是bootstrap.min.css 和mdb.min.css。例如，如果您的新编译文件名为 combined.css，那么您可以将问题中的链接标签替换为：

<link href="/build/css/site/combined.css" rel="stylesheet">

然后您可以像这样在 HTML 中使用样式：

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

请注意，您必须将元素包装在具有 bootstrap 或 mdb 类的 DIV（或其他元素）中才能获得预期的样式。

【讨论】：

可以，只要您不介意编译一些 SCSS 并包装您的 HTML 元素，如上所示。
它解决了给定的问题，但不实用，我不知道为什么要这样做。
@BartoszT 为什么这不实用？

【解决方案4】：

.btn-danger{
  background-color:red;
  width:90px;
  height:90px;
}

.m1 .btn-danger{
  background-color:green;
  width:90px;
  height:90px;
  
}

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

我认为一种方法是这样的，希望这可以解决您的问题

【讨论】：

【解决方案5】：

使用<style> scoped attribute 这是可能的，但有几个注意事项。

目前仅适用于 Firefox
其他所有浏览器都需要一个 polyfill 来添加对 scoped 属性的支持 - 这里是 one，还有其他几个可用
即使使用 polyfill，它也可能无法正常工作 - 我用不同的 polyfill 和 @import 做了一些快速实验，但没有运气

scoped 属性允许将<style> 标记内的CSS 限定为包含<style> 标记的父元素。这是一个简单的例子：

<div>
  <style scoped>
    p {color: blue;}
  </style>

  <p>This paragraph is blue.</p>
</div>

<div>
  <style scoped>
    p {color: red;}
  </style>

  <p>This paragraph is red.</p>
</div>

使用它，我们可以将 CSS 选择器替换为 @import，以在一个部分导入 Bootstrap CSS，在另一部分导入 Material Design Bootstrap。

注意：自 2017 年 7 月 6 日起，以下示例仅适用于 Firefox。

<div>
  <style scoped>
    @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
  </style>

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

<div>
  <style scoped>
    @import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.min.css)
  </style>

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

这是 Firefox 中的结果

另一个缺点是您需要为每个部分重新@import 每个样式表。

有几个 polyfill 可用于向当前不支持 scoped 的浏览器添加对它的支持。如果您已经在使用 jQuery，还有一个 jQuery 脚本。

【讨论】：