提问人：Eldar 提问时间：11/7/2023 最后编辑：TylerHEldar 更新时间：11/7/2023 访问量：53
原生 CSS 嵌套混淆
Native CSS nesting confusion
问：
在 MDN 上使用 CSS 嵌套指南中，在示例部分中，我们有以下 HTML 结构：
<div class="wrapper">
<article class="card">
<h2>Card 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</article>
<article class="card featured">
<h2>Card 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</article>
...
</div>
和 CSS：
.card {
padding: 0.5rem;
border: 1px solid black;
border-radius: 0.5rem;
& h2 {
/* equivalent to `.card h2` */
color: slateblue;
.featured & {
/* equivalent to `.featured .card h2` */
color: tomato;
}
}
}
我的问题是关于这个CSS行的：/* equivalent to .featured .card h2 */
它是如何工作的？因为在示例中，元素不是元素的子元素，但样式仍然被应用。.card.featured
我的理解是它应该是这样的：
.featured.card h2
我不明白在这种特殊情况下，当我们嵌套了几层和选择器的末尾时，嵌套是如何工作的。&
答：
3赞
Alohci
11/7/2023
#1
您从 MDN 引用的代码注释行是错误的。
等价于 因此最里面的嵌套选择器扩展为&:is(the-containing-selector)
.featured :is(:is(.card) h2)
这意味着“具有具有类的祖先和具有具有类的祖先的元素”。它们可以是同一个祖先。h2cardfeatured
.featured :is(:is(.card) h2) {
color: yellow;
}<div class="wrapper">
<article class="card">
<h2>Card 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</article>
<article class="card featured">
<h2>Card 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</article>
<article class="card">
<h2>Card 3</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</article>
</div>
评论
&