父选择器优先于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

您应该阅读specificity。

要回答您的直接问题，您的所有选择器都具有相同的特异性，因此在.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，即使特异性相同，仅仅因为它是稍后声明的。