英文:
SCSS - nth-child(2) affects all descendants
问题
我有一些看起来像这样的代码：
.my-class {
:nth-child(2) {
padding-right: 15px;
padding-left: 0;
...
...
}}
这个工作得很好。
问题是这也会应用于所有.my-class的后代元素。
例如，如果在.my-class下面还有一个<div className="test">...</div>，上面的填充也会应用于该div的第二个子元素。
这是CSS的工作方式吗？如何确保这仅适用于.my-class的第二个子元素，而不影响其他元素？
英文:
I have some code that looks like this:
.my-class {
:nth-child(2) {
padding-right: 15px;
padding-left: 0;
...
...
}}
This works fine.
The issues is that this also gets applied to all of .my-class's descendants.
So for example, if under .my-class I also have a <div className="test">...</div>, the padding above will also be applied to the second child of that div.
Is this how CSS works? How can i just make sure this applies to the second child of .my-class and nothing else?
答案1
得分: 2
以下是翻译好的部分：
如果你查看你的SCSS实际编译成的样式，你会看到它被编译为：
.my-class :nth-child(2) {
padding-right: 15px;
padding-left: 0;
}
因为CSS具有级联性（因此叫做级联样式表），你的 :nth-child(2) 会影响每个第二个子元素。
我将左侧的内边距进行了更改，以便能够看到效果。
如果你想停止这种效果，你需要更具体地指定 :nth-child(2) 应该应用在哪里。
像这样：
.my-class > :nth-child(2) {
padding-right: 0;
padding-left: 15px;
}
这实际上只会影响.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
英文:
If you look at how your SCSS actually gets compiled, you'll see it gets compiled to:
.my-class :nth-child(2) {
padding-right: 15px;
padding-left: 0;
}
Because CSS cascades (hence cascading style sheet), your :nth-child(2) will affect every second child.
I changed the padding to the left side, so it can be seen.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.my-class :nth-child(2) {
padding-right: 0;
padding-left: 15px;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
If you want to stop this, you need to get specific on the what the :nth-child(2) should be applied to.
Like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.my-class > :nth-child(2) {
padding-right: 0;
padding-left: 15px;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
That essentially will only affect DIRECT children of .my-class.
Here's the SCSS:
.my-class {
> :nth-child(2) {
padding-right: 15px;
padding-left: 0;
}}
Documentation for the direct child combinator >
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
答案2
得分: 0
"你可以这样做
.my-class {
:nth-child(2) {
padding-right: 15px;
padding-left: 0;
}}
运算符">" 表示你只想为自己做"
英文:
you can do like this
.my-class {
> :nth-child(2) {
padding-right: 15px;
padding-left: 0;
}}
the operator ">" means that you want just for himself
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论