javascript - CSS/CSS3 过滤内容，为什么不起作用？

Question

我不明白为什么它不起作用。

基本上，当您选择一个选项时，它只显示与其相关的图片，而其他图片则略微隐藏。

如果您将所有输入移动到名为“画廊”的 div 中，它会完美地工作，但出于设计原因，我需要将所有输入 radio 放在另一个单独的 div 中。

请问我该如何解决？

注意:我曾尝试使用 JS 实现它，但我没有运气

谢谢

/*Select Categorie*/

input#select-animals:checked~#gallery div:not(.animals-item),
input#select-lightning:checked~#gallery div:not(.lightning-item),
input#select-desert:checked~#gallery div:not(.desert-item) {
  opacity: 0.1;
}

<h2>test</h2>

<div>
  <input type="radio" id="select-all" name="button">
  <label for="select-all" class="label-all">
    All
  </label>
  <input type="radio" id="select-animals" name="button">
  <label for="select-animals" class="label-animals">
    Animals
  </label>
  <input type="radio" id="select-lightning" name="button">
  <label for="select-lightning" class="label-lightning">
    Lightning
  </label>
  <input type="radio" id="select-desert" name="button">
  <label for="select-desert" class="label-desert">
    Desert
  </label>
</div>



<div class="gallery">
  <div class="animals-item">
    <img src="http://farm8.staticflickr.com/7254/7740405218_deedfa35cb_t.jpg" />
  </div>
  <div class="desert-item">
    <img src="http://farm5.staticflickr.com/4086/4964465857_0bdbe1a84c_t.jpg" />
  </div>
  <div class="lightning-item">
    <img src="http://farm6.staticflickr.com/5114/5858971312_0fec4bdaa0_t.jpg" />
  </div>
  <div class="desert-item">
    <img src="http://farm8.staticflickr.com/7338/12111748274_e3319bfbd5_t.jpg" />
  </div>
  <div class="animals-item">
    <img src="http://farm7.staticflickr.com/6206/6105317674_80f67a9a5e_t.jpg" />
  </div>
  <div class="desert-item">
    <img src="http://farm7.staticflickr.com/6143/5951696095_c6dd89f5da_t.jpg" />
  </div>
  <div class="lightning-item">
    <img src="http://farm4.staticflickr.com/3130/2840585154_232b19bfbd_t.jpg" />
  </div>
  <div class="animals-item">
    <img src="http://farm9.staticflickr.com/8239/8548052436_a36e792c85_t.jpg" />
  </div>
  <div class="lightning-item">
    <img src="http://farm1.staticflickr.com/129/390350345_a0a04a139d_t.jpg" />
  </div>
</div>

Answer 1

要使通用兄弟选择器 ~ 正常工作，您需要将 input 移到它们的 div 之外，这样它们就变成了 siblings 与您要定位的元素。

我还将 gallery 规则的 ID 选择器 # 更改为类选择器 。

/*Select Categorie*/
input {
  display: none;
}
.labels {
  padding-bottom: 20px;
}
.labels label:hover {
  color: red;
  cursor: pointer;
}
#select-animals:checked ~ .gallery div:not(.animals-item),
#select-lightning:checked ~ .gallery div:not(.lightning-item),
#select-desert:checked ~ .gallery div:not(.desert-item) {
  opacity: 0.1;
}

<h2>test</h2>

<input type="radio" id="select-all" name="button">
<input type="radio" id="select-animals" name="button">
<input type="radio" id="select-lightning" name="button">
<input type="radio" id="select-desert" name="button">

<div class="labels">
  <label for="select-all" class="label-all">
    All
  </label>
  <label for="select-animals" class="label-animals">
    Animals
  </label>
  <label for="select-lightning" class="label-lightning">
    Lightning
  </label>
  <label for="select-desert" class="label-desert">
    Desert
  </label>
</div>



<div class="gallery">
  <div class="animals-item">
    <img src="http://farm8.staticflickr.com/7254/7740405218_deedfa35cb_t.jpg" />
  </div>
  <div class="desert-item">
    <img src="http://farm5.staticflickr.com/4086/4964465857_0bdbe1a84c_t.jpg" />
  </div>
  <div class="lightning-item">
    <img src="http://farm6.staticflickr.com/5114/5858971312_0fec4bdaa0_t.jpg" />
  </div>
  <div class="desert-item">
    <img src="http://farm8.staticflickr.com/7338/12111748274_e3319bfbd5_t.jpg" />
  </div>
  <div class="animals-item">
    <img src="http://farm7.staticflickr.com/6206/6105317674_80f67a9a5e_t.jpg" />
  </div>
  <div class="desert-item">
    <img src="http://farm7.staticflickr.com/6143/5951696095_c6dd89f5da_t.jpg" />
  </div>
  <div class="lightning-item">
    <img src="http://farm4.staticflickr.com/3130/2840585154_232b19bfbd_t.jpg" />
  </div>
  <div class="animals-item">
    <img src="http://farm9.staticflickr.com/8239/8548052436_a36e792c85_t.jpg" />
  </div>
  <div class="lightning-item">
    <img src="http://farm1.staticflickr.com/129/390350345_a0a04a139d_t.jpg" />
  </div>
</div>