css - 父选择器是否优先于 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 样式，它是否必须与您要覆盖的选择器一样具体？

score 5 · Accepted Answer

你应该阅读特异性。

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

score 0 · Accepted Answer

父选择器包含那些未分配值的标签中的所有内容。因此，在您的情况 2nd 中，您想在其中添加文本或图像，它将与该类一致。第三个也会这样做。把它想象成一个数学方程和括号：

5 x 4 x (3x3) = 180

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

score 0 · Accepted Answer

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

.red, .green
.blue, .green

由于逗号，单独选择元素。也就是说，<div class=red>and<div class=green>都被选中，无论一个是另一个的后代，都会发生这种情况。我认为您的意思是删除逗号。

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

3 回答 3