CSS 规则顺序

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 元素：

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

编辑

这里说的比较具体好像是错误的。这些选择器似乎没有增加任何价值，但顺序确实有帮助。斯蒂芬在下面的评论中证明了这一结果。

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

更具体

希望这能让事情变得更有意义。

Answer 2

sibling/descendant 选择器 + 和 > 不添加任何特异性。通过交换规则自己尝试，最后一个总是赢：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 规则顺序

CSS rules order

css

css-specificity