Question

因此，在计算某些CSS代码的特异性时，我发现了一些我认为矛盾的东西。

根据＆＃34;公式＆＃34; （内联＆gt; id＆gt;类＆gt;元素）我对前面几行进行了计算：

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

由于（2）有两个类，它的特异性高于（1），因此浏览器应该是黑色而不是红色，这反过来恰好相反。

任何人都能给我一些关于我做错事情的见解吗？

HTML CODE：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

关于第二段：在您的两个选择器中，.a > .c选择器仅直接应用于父<div class="c">元素。如果任何其他选择器不覆盖它们，则继承其样式。但是p.b选择器是两个中唯一直接应用于子<p>元素的选择器，其中包含文本，因此它优先。正如另一张海报所说，除非两个选择者瞄准相同的元素，否则特异性规则不适用。在这里，他们的目标是父母和孩子。在决定孩子的样式时，孩子自己的选择器总是会赢得从父母继承的样式。

Answer 2

这里有一个小提示，展示了一个例子： 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规则存在于该选择器的范围之外，因为＆gt;是直接后代，孩子不会受到影响

Answer 3

当针对相同的元素时，特异性适用，而不是从上升元素继承。

p.b适用于带有Parágrafo2的p元素，而.a > .c适用于其容器，因此无需解决冲突。

特异性错误 - CSS

3 个答案: