特异性错误 - CSS

Question

因此，在计算某些 CSS 代码的特异性时，我遇到了一些我认为矛盾的事情。

根据 "formula" (inline > id > class > elements) 我对前面的几行进行了计算：

(1)  p.b {color: red}          Specificity: (0,0,1,1)
(2)  .a>.c {color: black}                   (0,0,2,0)

因为 (2) 有 2 个 classes，它的特异性高于 (1)，因此浏览器应该选择黑色而不是红色，恰恰相反。

谁能告诉我我做错了什么？

HTML 代码：

/* Specificity: (0,0,1,1) */
p.b {
  color: red
}

/*              (0,0,2,0) */
.a>.c {
  color: black
}

<div class="a">
  <div class="c">
    <p class="b">Parágrafo 2</p>
  </div>
</div>

Answer 1

这里有一个 fiddle 显示了您所布置的示例： http://jsfiddle.net/zfd2a8et/1/

<div class="a">
    <p class="b">this should be red</p>
    <p class="b c">This should be black</p>
    <p>This has children <span class="c">which should be red because .a &gt; .c is selecting only the first level of children</span></p>
    <div class="c"> This should be black <p class="b"> and this should be red</p></div>
</div>

css:

p.b{
    color:red;
}

.a > .c{
    color:black;
}

> 选择器寻址 .a 的直接后代，因此因为您的 c 嵌套在 b 中，所以选择器不合格。您的第二段最初确实与 .a > .b 匹配，但是 p.b 规则存在于该选择器的范围之外，因为 > 是直接后代并且 child 不会受到影响

Answer 2

这种特殊性适用于针对相同元素的情况，不适用于从上升元素继承。

您的 p.b 应用于带有 Parágrafo 2 的 p 元素，而 .a > .c 应用于其容器，因此没有冲突得到解决。

Answer 3

关于第二段：在您的两个选择器中，.a > .c 选择器仅直接应用于 parent <div class="c"> 元素。如果任何其他选择器不覆盖它们，它的样式将被继承。但是 p.b 选择器是两个直接应用于带有文本的 child <p> 元素的唯一选择器，因此它具有优先权。正如另一位发帖人所说，除非两个选择器针对同一元素，否则特异性规则不适用。他们在这里瞄准 parent 和 child。在决定 child 的样式时，child 自己的选择器将始终胜过从 parent.

继承的样式

特异性错误 - CSS

Specificity Error - CSS

css

css-specificity