CSS选择器：将样式应用于选择器

Question

我正在使用SASS的& - 嵌套来将背景应用于:first-child元素，但也希望将独特的样式应用于 那些{{ 1}}元素。

这是SASS：

:first-child

CSS // Part Tree .part-tree-item{ ... &:first-child{ background: red; .part-tree-item-header{ top: -5px; margin-top: 0; } } } 选择器似乎工作正常，将红色背景应用于第一个孩子（并且只有第一个孩子）：

但是，正如您从SASS中看到的那样，我有一些特殊的样式，我只想应用于:first-child

中的.part-tree-item-header元素

在这里，我在.part-tree-item:first-child元素中显示.part-tree-item-header的样式不 .part-tree-item（请注意缺少红色背景，表明如此）。

但是，此:first-child仍然有特殊情况SASS（调整它的.part-tree-item-header和top样式）

以下是HTML，以证明有问题的margin-top父母实际上不是.part-tree-item：

我只是错误地使用:first-child选择器吗？它不像我认为的那样链吗？我可以只将它用作选择器的最后一部分吗？

非常感谢任何帮助!!!

Answer 1

对此的唯一解释是，有一些遥远的.part-tree-item祖先是其父母的第一个孩子。

要解决此问题，请将子组合子添加到.part-tree-item-header规则，以确保与.part-tree-item:first-child相关的唯一.part-tree-item-header是其父级，而不是其任何祖先。匹配选择器：

// Part Tree
.part-tree-item{
    ... 

    &:first-child{
        background: red;

        > .part-tree-item-header{
            top: -5px;
            margin-top: 0;
        }
    }
}