我有一個容器，里面有三個部分。我想在給父容器添加類的同時，使第三部分不可見。但我的代碼不作業。
這里是HTML代碼：
< section id="parts" class="two-parts">/span>
<div id="partOne">/span>. ...</div>。
<div id="partTwo">/span>. ...</div>。
<div id="partThree">/span>。 ...</div>。
</section>/span>
這里是SCSS代碼：
#partThree{
display: block;
.two-parts &{
display: none;
}
}
我想隱藏#partThree div，當#parts div有.two-parts類時。
伙計們! 我找到了問題所在。我檢查了Scss到Css的輸出，這里是Css的輸出：
我發現了問題。
.two-parts body #parts #partThree {
display: none;
}
它應該是#parts.two-parts #partThree。但為什么會出現在所有元素的頂部呢？
uj5u.com熱心網友回復：
正如我在你的另一個帖子中回答的那樣
：看起來你的代碼被一個body-標簽和一個#parts-標簽包裹著。這意味著你需要把你的代碼改成這樣：
#partThree{
display: block;
}
&.two-parts #partThree {
顯示：無。
}
&取當前行之前的所有內容。因此，如果你的最終SCSS是：
body {
#parts {
#partThree {
display: block;
.two-parts & {
顯示：無。
}
}
}
}
然后，&將在其他東西之前添加.two-parts，并使其：
.two-parts body #parts #partThree {
顯示：無。
}
uj5u.com熱心網友回復：
實作你所需要的最簡單的方法是通過設定.two-parts和#partThree作為兄弟姐妹，并應用~ css運算子。
<style>
#partThree {
display: block;
.two-parts ~ {
display: none;
}
}
<style>。
<section id="parts">
<div id="partOne">/span>. ...</div>。
< div id="partTwo" class="two-parts">/span>。 ...</div>。
<div id="partThree">/span>。 ...</div>。
</section>/span>
這只有在#partThree和.two-parts兄弟姐妹和.two-parts在前的情況下才會起作用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/333736.html
標籤：
上一篇：每個標簽的顏色不同