我有一个容器，里面有三个零件。我想在将类添加到父容器时使第三部分不可见。但我的代码不起作用..

下面是HTML代码：

<section id="parts" class="two-parts">
    <div id="partOne">...</div>
    <div id="partTwo">...</div>
    <div id="partThree">...</div>
</section>

以下是SCSS代码：

#partThree{
    display: block;

    .two-parts &{
        display: none;
    }
}

当#partThreeDIV有body类时，

我想隐藏body { #parts { #partThree { display: block; .two-parts & { display: none; } } } }

它应该是.two-parts body #parts #partThree { display: none; } 。但为什么它会出现在所有元素的顶部？

---

顺晟科技：

正如我在你的另一篇文章中所回答的：

看起来您的代码是由#parts.two-parts #partThree-tag和#partThree-tag包装的。这意味着您需要将代码更改为：

#parts

<代码>&；获取当前行之前的所有内容。因此，如果您的最终SCSS是：

<代码>正文{#零件{#第三部分{显示：块；.两部分&；{显示：无；}}}}

然后#partThree{ display: block; } &.two-parts #partThree { display: none; } 将在所有其他内容之前添加&，并使其：

<代码>.两部分正文#部分#第三部分{显示：无；}

实现所需功能

的最简单方法是将body和&设置为同级，并应用~CSS操作符。

<代码><；样式>；#第三部分{显示：块；.两部分~{显示：无；}}<；样式>；<；部分ID="；零件"；>；<；DIV ID="；部分"；>；..<；/DIV>；<；DIV ID="；partTwo"；类="；两部分"；>；..<；/DIV>；<；DIV ID="；第三部分"；>；..<；/DIV>；<；/部分>；

只有#partthree和.two-parts兄弟和.two-parts在前面时

，这才会起作用。