本机CSS嵌套混乱

发布于11月07日

在关于MDN的Using CSS Nesting指南的示例部分中，我们具有以下HTML struct :

<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个

我不明白在这种特殊情况下，当我们有几个层嵌套并且在 Select 器的末尾有&个层时，嵌套如何工作.

<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>

本机CSS嵌套混乱

推荐答案

Css相关问答推荐

如何改变图标的 colored颜色时悬停在

Css-如何隐藏WP管理菜单上没有css类的第4<；li&>

如何将CSS Paint API与Reaction一起使用

如何为多个背景和棋盘设置不同的大小

带高度的容器查询不工作，但可随宽度调整

在文本之前添加了额外的空间-Angular 树视图CSS

两列网格中左列第一个文本正下方的按钮

ReactJS 连续循环动画滚动

排除特定元素的目标元素

更改 20 个实例中的一个组件的样式

如何使用 ReactJS 使用 CSS 设置 map 容器的样式

Sass @use 排序

对 CSS 容器查询使用多个条件

直观地指示 IFrame 内的表单正在提交，但没有 javascript

Adobe Illustrator 删除我在 svg 图像上的类名.我怎样才能防止这种情况？

如何在 nth-child 中正确传递 CSS 变量？

对齐视图中的复选框(RN)

为什么不能将特定于供应商的伪元素/类组合成一个规则集？

如何保持包装的弹性项目与前一行元素的宽度相同？

对象拟合不影响图像