在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样式，它是否必须像您试图覆盖的选择器一样特定？

Answer 1

您应该了解特异性。

为了回答您的直接问题，所有选择器都具有相同的特异性，因此在.green的情况下，最后一条规则优先：您的边界将是蓝色的。

Answer 2

父选择器包含那些没有赋值的标记中的所有内容。所以在第二个例子中，你想在那里添加文本或图像，它将与该类一致。第三个也会这么做。把它想象成一个数学方程和括号：

5 x 4 x（3x3）=180

你应该先做括号，然后再做其他因素。

Answer 3

如果只是使用上级/下级选择器，则元素的位置对选择器的特定性没有影响。注意

.red, .green
.blue, .green

由于使用逗号，请分别选择元素。也就是说，<div class=red>和<div class=green>都被选中，无论其中一个是另一个的后代，都会发生这种情况。我认为你的意思是去掉逗号。

在这种情况下，规则的宣布顺序将生效，以后的规则具有更高的优先级。也就是说，.blue, .green比.red, .green具有更高的优先级，尽管仅仅因为稍后声明了它，所以特异性是相同的。