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

Question

我无法解开为什么它不起作用。

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

如果您将所有输入在DIV中移动称为"画廊"，但由于设计原因，我需要在另一个单独的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的s移到其div之外，因此它们成为 siblings ，您要定位目标。

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

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