<分区>
<分区>
我有一些看起来像这样的代码:
.my-class {
:nth-child(2) {
padding-right: 15px;
padding-left: 0;
...
...
}}
这很好用。
问题是这也适用于所有 .my-class的后代。
例如，如果在 .my-class 下我还有一个 <div className="test">...</div> ，上面的填充也将应用于 div 的第二个 child .
这是 CSS 的工作原理吗？我怎样才能确保这适用于 .my-class 的第二个 child ？没有别的吗？
最佳答案
如果您查看 SCSS 的实际编译方式，您会发现它被编译为:
.my-class :nth-child(2) {
padding-right: 15px;
padding-left: 0;
}
因为 CSS 级联(因此级联样式表)，您的 :nth-child(2) 将影响第二个子级。
我把 padding 改到了左边，这样就可以看到了。
.my-class :nth-child(2) {
padding-right: 0;
padding-left: 15px;
}<div class="my-class">
<div>
first
<div>
first child
</div>
<div>
second child
<div>
first - second child
</div>
<div>
second - second child
</div>
</div>
</div>
<div>
second
</div>
</div>如果你想停止这种情况，你需要具体说明 :nth-child(2) 应该应用于什么。
像这样:
.my-class > :nth-child(2) {
padding-right: 0;
padding-left: 15px;
}<div class="my-class">
<div>
first
<div>
first child
</div>
<div>
second child
<div>
first - second child
</div>
<div>
second - second child
</div>
</div>
</div>
<div>
second
</div>
</div>这基本上只会影响 .my-class 的直接子级。
这是 SCSS:
.my-class {
> :nth-child(2) {
padding-right: 15px;
padding-left: 0;
}}
直接子组合器的文档 >
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
关于css - SCSS - nth-child(2) 影响所有后代，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59581893/