Question

在我的CSS中，我有这个：

b {
  color: Red;
}

在我体内：

<b>Hello world!</b>

结果，我得到了＃Hello; Hello world！＆＃34;红色的文字。

但是，当我添加更多类时：

.myClass {
  color: Blue;
}
.green {
  color: Green;
}

我修改了我的身体：

<b>H<a class="myClass">ell</a><a class="green">o</a> wo<a style="color: Black;">rl</a>d

我不会得到与之前相同的结果。

有没有办法严格设置CSS样式？这意味着使用上面的代码我希望得到＆＃34; Hello world！＆＃34;文字是红色的。

由于

Answer 1

这是 CSS Specificicty

的问题

概念：特定性是浏览器决定哪种方式的手段属性值与元素最相关并且可以成为应用。特异性仅基于匹配规则由不同种类的选择者组成。

内联样式覆盖外部CSS，类选择器覆盖元素级别选择器。

以下选择者列表是通过提高特异性来实现的：

通用选择器
输入选择器＆lt; ---您的b CSS
类选择器＆lt; ----您的.xyz CSS
属性选择器
伪类
ID选择器
内联样式＆lt; ---您的style=''

如果您希望覆盖特异性，可以在相关规则之后使用!important，例如：

b {
  color: Red !important;
}

但是，不推荐这样做，相反，你应该写得更好＆＃39;规则（更具体），以适当的方式定位您的HTML。这可以确保您最终得到更好的结构化代码，问题是!important因为它可能导致无法预料的情况，因为您可能已经忘记了之前已经覆盖了规则的规则。

再次，来自MDN：

重要的例外

当样式声明使用！important规则时，这个   声明覆盖CSS中的任何其他声明，无论在何处   它在声明列表中。虽然，！重要无关   具有特异性。使用！important是不好的做法，因为它使   你努力调试，因为你打破了你的自然级联   样式表。

一些经验法则

永远不要在网站范围内使用！important。只使用！important on   特定于页面的css，它覆盖了站点范围或外来的css（来自ExtJs   或者例如YUI）。当你写作时，永远不要使用！important   插件/混搭。始终寻找一种方法来使用特异性   考虑！重要

Answer 2

使用您提供的标记，不。否则，也许

内联样式优先于样式表，因此无论如何，部分文本都是黑色的。您可能能够创建一个具有足够特异性的规则，它将优先于任何其他规则。

b, b .myClass, b .green {
     color: red;
 }

虽然维护起来很麻烦。并且有一个机会，不同的CSS规则将在以后获得更高的优先级。我不完全确定即使指定所有带*的孩子也会这样做。

Answer 3

您似乎在询问是否可以以不会被内部元素上的设置覆盖的方式在元素上设置属性（示例中为color）。

您无法对元素本身的设置执行此操作。但是您可以在元素及其所有后代上设置属性：

b, b * {
  color: Red !important;
}

这将覆盖内部元素上color的任何常规设置。但是，它对.green { color: Green !important; }无效。要打败它，您需要一个更具体的选择器，例如b .green，用于您的规则 - 因此没有通用方法来实现这一点（即，一种独立于元素内使用的特定标记。）

css - 严格设置风格？

3 个答案: