我正在过滤没有 Java 和 IDK 的 div，将 div 放在 CSS 上的位置

Question

你可以看到有一个div的id为sidebar。我不知道在CSS上放些什么才能让它工作

CSS:

button[data-filter="walks"]:focus ~ div div:not([class*="walks"]),
button[data-filter="swims"]:focus ~ div div:not([class*="swims"]),
button[data-filter="flies"]:focus ~ div div:not([class*="flies"]) {
display:none;
}

html:

<div class="filteredList">
<div id="sidebar">
<h3>Filters</h3>
<button class="filter-option" data-filter="*" tabindex="-1">All</button>
<button class="filter-option" data-filter="walks" tabindex="-1">Walks</button> 
<button class="filter-option" data-filter="swims" tabindex="-1">Swims</button> 
<button class="filter-option" data-filter="flies" tabindex="-1">Flies</button>
</div>

<div id="animals">
<h3>Animals</h3>
<div class="dog walks">Dog</div>
<div class="eagle flies">Eagle</div>
<div class="cow walks">Cow</div>
<div class="shark swims">Shark</div>
<div class="canary flies">Canary</div>
<div class="human walks">Human</div>
<div class="salamander swims walks">Salamander</div>
</div>
</div>

我试过使用这个:

#sidebar button[data-filter="walks"]:focus ~ div div:not([class*="walks"]),
#sidebar button[data-filter="swims"]:focus ~ div div:not([class*="swims"]),
#sidebar button[data-filter="flies"]:focus ~ div div:not([class*="flies"]) {
display:none;

，我希望它能工作。

Answer 1

问题是CSS总是层叠的。

你不能在结构上，因此CSS期望动物div是按钮的兄弟。

你需要重新构建你的HTML，这样过滤器就不会嵌套在边栏div中，这样代码片段才能正常工作。

<div class="filteredList">
<div id="sidebar">
<h3>Filters</h3>
<button class="filter-option" data-filter="*" tabindex="-1">All</button>
<button class="filter-option" data-filter="walks" tabindex="-1">Walks</button> 
<button class="filter-option" data-filter="swims" tabindex="-1">Swims</button> 
<button class="filter-option" data-filter="flies" tabindex="-1">Flies</button>

<div id="animals">
<h3>Animals</h3>
<div class="dog walks">Dog</div>
<div class="eagle flies">Eagle</div>
<div class="cow walks">Cow</div>
<div class="shark swims">Shark</div>
<div class="canary flies">Canary</div>
<div class="human walks">Human</div>
<div class="salamander swims walks">Salamander</div>
</div>
</div>
</div>

有了这样的改变，你的CSS代码应该像预期的那样工作，当相应的按钮元素被聚焦时，隐藏带有walks、swims和flies类的div元素。

除此之外，为了便于访问，我建议您使用复选框和::checked。

Answer 2

您可以使用新的:has选择器完成此操作:

#sidebar:has(button[data-filter="walks"]:focus) ~ #animals div:not([class*="walks"]),
#sidebar:has(button[data-filter="swims"]:focus) ~ #animals div:not([class*="swims"]),
#sidebar:has(button[data-filter="flies"]:focus) ~ #animals div:not([class*="flies"]) {
display:none;
}

演示:https://jsfiddle.net/qy3wuv4b