CSS中，父级选择器的优先级是否高于子级选择器？

Question

我有一个问题，关于CSS选择器在父子之间是如何工作的，哪一个会优先于另一个。

<div class="red">
  <div class="blue">
    <div class="green">
    </div>
  </div>
</div>

如果您有这样的情况，那么请按照以下步骤操作：

   .red .green{
    border: 1px solid red;
    }

    .blue .green{
    border: 1px solid blue;
    }

哪个会生效？覆盖CSS样式需要和你要覆盖的选择器一样具体吗？

- user2128225

---

难道你的意思不是 .red .green 和 .blue .green 吗？否则你会将第一个样式应用于 .red 和 .green，第二个样式应用于 .blue 和 .green。 - Dom

抱歉，是的，那就是我想说的！ - user2128225

您也可以在我的回答（以及该回答下的一长串评论）中找到启发。 - ScottS

Answer 1

我建议你阅读关于优先级的文章。

回答你的问题，所有选择器的优先级相同，在.green的情况下，最后一个规则具有优先级：你的边框将是蓝色。

- André Dion

---

尽管您在我回答后更改了问题的参数，但我的答案仍然适用。 - André Dion

覆盖CSS样式需要具有相同级别的选择器吗？ 还是仅基于CSS的顺序？ - user2128225

阅读我提供的文章 :) 你会发现答案是“这取决于情况。” - André Dion

Answer 2

父选择器包括那些没有被赋值的标签内所有内容。所以在你的情况下，第二个，如果你想在那里添加文本或图像，它将与该类一致。第三个也是如此。把它想象成一个数学方程和括号：

5 x 4 x (3x3) = 180

你会先处理括号，然后再处理其他因素。

- Keith

Answer 3

如果您只是使用祖先/后代选择器，则元素的位置对选择器特异性没有影响。请注意

.red, .green
.blue, .green

因为逗号的存在，所以要分别选择元素。也就是说，<div class=red>和<div class=green>都会被选中，而这不管它们是否是彼此的后代。我认为你的意思是要去掉逗号。

在这种情况下，规则声明的顺序将起作用，后面的规则具有更高的优先级。也就是说，.blue, .green比.red, .green具有更高的优先级，即使特异性相同，只是因为它是后声明的。

- Explosion Pills