Question

这里我有8个CSS规则，我想知道它们的重要性。我正在阅读一段时间，但我无法弄清楚这个确切的例子。

a > b + a, a > b {color: red;}
a > a, a + b {color: brown;}
c > b, c > a > b {color: yellow;}
a > c {color: green;}
c > a {color: green;}

Html Elements：

<a>
  <b>Element 1</b>
  <c>
    <a>Element 2 </a>
    <b>Element 3</b>
    <a>
      <a>Element 4</a>
      <c>Element 5</c>
      <b>Element 6</b>
      <a>Element 7</a>
      <a>Element 8</a>
    </a>
  </c>
  <b>
    <a>Element 9</a>
    <b>Element 10</b>
  </b>
</a>

这些规则的正确顺序是什么？

Answer 1

这有点棘手，因为你没有告诉我们你想要瞄准什么。这是所有这一切的重要因素。让我们尝试点击每个案例......

a > b + a, a > b {color: red;}
a > a, a + b {color: brown;}
c > b, c > a > b {color: yellow;}
a > c {color: green;}
c > a {color: green;}

如果我们定位a。

If `a` is an immediate child of `a` AND immediately follows `b` `a` will be `red`
If `a` is only a child of `a` `a` will be brown
If `a` is only a child of `c` `a` will be green

看着这个，你可以看到这些是特定的规则。如果html显示：

<a>
 <c> <!-- green -->
  <a> <!-- green -->
   <b></b> <!-- yellow -->
   <a></a><!-- red -->
  </a>
  <b></b> <!-- yellow -->
 </c>
</a>

编辑

这里的陈述似乎是更具体的错误。这些选择器似乎没有添加任何值，但订单确实有帮助。斯蒂芬在下面的评论中证明了这一结果。

唯一值得注意的是在第一个b之后a和c内紧跟a之后的元素b。此元素为YELLOW，因为c > b在a + b之后，如果这些规则被切换，则为BROWN。 a为红色，因为a > b + a比c > a更具体。

希望这可以清除它并使其更有意义。

Answer 2

兄弟/后代选择器+和>不会添加任何特异性。通过交换规则自己尝试，最后一个赢得：http://jsfiddle.net/6p7ckqzm/

逗号并没有为选择器添加特异性，它们被视为两个独立的选择器，恰好与一组样式声明相关。

因此，第一个规则的a > b + a部分和第三个规则的c > a > b部分具体相同，因为它们由三个元素选择器组成。他们分享第一名，特异性为3.所有其他元素由两个元素组成，将它们排在第二位，特异性为2.

以下是有关如何计算特异性的更多信息：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

CSS规则顺序

2 个答案: