计算 CSS 特异性的错误答案

【问题标题】：Mistake in Calculating Specificity for CSS计算 CSS 特异性的错误
【发布时间】：2016-12-03 15:19:14
【问题描述】：

我正在尝试使用 CSS。

这是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>

这是 CSS

p {color: blue; }
strong {color : red;text-decoration: underline;}
.carrot {color:orange;}
.spinach {color:green;}
#first {font-style:italic;color:brown;}
#second {color:blue;}

我不明白为什么第一行不是完全棕色的。我认为 id (#first) 比类 (.carrot) 具有更高的优先级。

我尝试从http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ 计算特异性 .所以 .carrot 有 [0,0,1,0] 而#first 有 [0,1,0,0]。我不确定发生了什么事。

最初，我认为子样式会覆盖父样式，但对此我得到了相互矛盾的答案。

【问题讨论】：

.spinach {color:green;} 类应用在 Style 如果你想第一行完全棕色，那么你需要先删除该类形式使用它的行
还有 class="carrot" 应用在那里

标签： css

【解决方案1】：

CSS 规则适用于选择器指定的特定元素。它们不会以某种方式神奇地向下延伸并影响儿童。但是，某些属性（不是全部）是**继承的*，这意味着在没有任何特定样式的情况下，属性值将从父级获取。 color 就是这样一种继承属性。

您的 brown 规则适用于 #first 元素，但不适用于子元素。子元素可能使用父颜色设置样式，因为颜色是继承的属性，但在这种情况下，您已直接设置它们的样式，因此不会发生继承。

澄清一下，id 选择器的高特异性确实几乎可以保证#first 元素将是棕色的（例如，假设没有其他规则与!important 一起使用）。但这种高特异性与计算子级联的结果无关。孩子们找到自己的风格，只有在他们没有自己的风格时才继承父风格的颜色。换句话说，父选择器的高特异性不会使其向下继承“更强”，从而会覆盖子选择器的设置。继承既不强也不弱，也不重要。这只是当子属性具有值 inherit 时发生的一种行为（默认情况下，例如 color 的情况，或显式）。

【讨论】：

【解决方案2】：

您使用类选择器定位特定元素，因此级联被覆盖。

为了获得更好的想法，专门针对元素。

#first .spinach {
  color: brown;
}

http://codepen.io/stenmuchow/pen/rVdMjR

【讨论】：

【解决方案3】：

您还将样式应用于p#first（.carrot 和.spinach）的子代。如果你想让第一行的所有东西都是棕色的，你可以这样：

#first,
#first strong{
    color: brown;
}

这只是解决问题的一种方式。

【讨论】：

【解决方案4】：

点对点，id 比类更具体。因此，如果您在同一个元素上有一个 id 和一个类，则 id 将“获胜”。

但是，在您的示例中，胡萝卜和菠菜类更具体，因为它们直接引用 strong 元素

如果你仔细想想，id 比 css 中的 class 更具体，因为可能有许多元素具有相同的 class，但只有一个具有该 id。这不适用于子元素，您的代码就是一个很好的例子。当您直接使用类为元素设置样式时，这比通过 id 设置其祖先的样式更具体。

【讨论】：

【解决方案5】：

如果我们一步一步看，CSS 首先将棕色应用于整个 div，然后进入 div 并找到 carrot 类。

它应用相应的 css，即使它位于用另一种颜色定义的块内。

# 选择器的含义比. 选择器具有更高的优先级：

如果你使用 div 说：

<div class="carrot" id="first">Something</div>

现在 CSS 将优先考虑 # 选择器并使其变为棕色。

这就是 CSS 的工作原理..

由于 carrot 是一个没有任何其他 ID 的子代，因此在应用 # 选择器时，它的优先级高于其父代默认情况下它会被继承，但由于你定义了一个类并改变了它的颜色，它采用指定的颜色而不是父颜色。

【讨论】：