Question

我知道id比class更具体，class比tag更具体。

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p id="first">
      <strong class="carrot">C</strong>ascading
      <strong class="spinach">S</strong>tyle
      <strong class="spinach">S</strong>heets
    </p>
    <p id="second">
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
  </body>
</html>

style1.css

strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }
#second { color: cyan; }

结果：

output

就像我在第一段所期望的那样。但我预计第二段的第一个字母也会是青色的，因为id比tag更具体。

Answer 1

CSS特异性不会强制所选元素的后代从其父级继承属性值。

#second与元素<strong>不匹配，但strong确实匹配。

Answer 2

由于我认为昆汀的答案不太正确，或者至少有点误导，这是我的解释：

您的ID选择器将元素与相应的ID匹配。

关于继承，请查看CSS Spec 第6.1.1段规定的值表示：

用户代理必须首先根据以下机制（按优先顺序）为每个属性分配指定值：


如果级联产生值，请使用它。

否则，如果继承该属性并且该元素不是文档树的根，请使用父元素的计算值。

否则使用属性的初始值。每个属性的初始值在属性的定义中指示。

因此，父元素（<p>）的颜色值将被继承（并非所有属性都是可继承的）到子元素（<strong>），但是由于强元素的样式规则因此，第1点符合。

或者换句话说：当没有为适当的元素定义其他样式规则时，继承才会生效。

还要注意所有用户代理都有默认样式表！

id和tag之间的CSS选择器优先级

2 个答案: