CSS：选中不更改显示类型

问题描述

：checked可以更改标签本身的背景颜色，但由于某些原因，它不能用于显示。

我正在尝试将其设置为display：none，以完全隐藏它并用另一个图像集替换它。因此，白色和黑色图像

以下代码是与要更改的元素相关的所有内容。使用！important不能解决问题。

提前谢谢

.productInfo {
  display: flex;
  flex-direction: column;
  padding-top: 135px;
  height: 1500px;
}

.imagesAndinfo {
  display: grid;
  grid-gap: 30px;
  margin-left: -30px;
  width: 90vw;
  grid-template-columns: 40px 60% auto;
  height: 100%
}

.images {
  grid-column: 2/3;
  width: 100%;
  height: 130%;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(6,minmax(0,1fr));
  align-items: center;
  justify-content: center;
}

.img {
  width: 100%;
  max-height: 100%;
}

.images .top {
  grid-column: 1/3;
  grid-row: 1/3;
}

.images .mid1 {
  grid-column: 1/2;
  grid-row: 3/4;
  background: linear-gradient(0deg,rgba(237,237,1) 35%,rgba(255,255,1) 100%);
}

.images .mid2 {
  grid-column: 2/3;
  grid-row: 3/4;
  background: linear-gradient(0deg,1) 100%);
}

.images .mid3 {
  grid-column: 1/2;
  grid-row: 4/5;
  background: linear-gradient(0deg,1) 100%);
}

.images .mid4 {
  grid-column: 2/3;
  grid-row: 4/5;
  background: linear-gradient(0deg,1) 100%);
}

.black-images .bottom {
  grid-column: 1/3;
  grid-row: 5/7;
}

.white-images .bottom {
  grid-column: 1/2;
  grid-row: 5/6;
}

.black-images {
  display: none;
}

.white-button-color,.black-button-color {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.colors {
  display: grid;
  grid-template: repeat(2,1fr) / repeat(2,1fr);
  width: 12%;
  max-width: 150px;
  grid-gap: 15px;
  padding-bottom: 50px;
  height: 5%;
}

.colors h1 {
  margin-bottom: -10px;
  grid-row: 1/2;
  grid-column: 1/3;
  margin-top: 30px;
  font-size: 16px;
}

.white {
  width: 100%;
  max-height: 100%;
  grid-row: 2/3;
  grid-column: 1/2;
  background-color: #ededed;
  border-color: #a5a7aa;
  border-style: solid;
  border-width: 3px;
  border-radius: 3px;
}

.black {
  width: 100%;
  max-height: 100%;
  grid-row: 2/3;
  grid-column: 2/3;
  background-color: #1c1c1c;
  border-color: #2d2d2d;
  border-style: solid;
  border-width: 3px;
  border-radius: 3px;
}

.img:hover {
  border-style: solid;
  border-color: #1c1c1c;
  border-radius: 3px;
  border-width: 2px;
  cursor: pointer;
}

.white-button-color:checked~.white-images+img {
  display: none;
}

<div class="productInfo">
  <p class="nav">Products / Headsets / Arctis 7</p>
  <div class="imagesAndinfo">
    <div class="images white-images">
      <img class="top img" src="https://media.steelseriescdn.com/thumbs/filer_public/13/9c/139cd0b0-d085-4d96-9314-edb8438db7e6/a7_white_buy_001.jpg__1850x800_q100_crop-scale_optimize_subsampling-2.jpg" alt="">
      <img class="mid1 img" src="https://media.steelseriescdn.com/thumbs/filer_public/b3/bd/b3bdb8b8-2400-4575-b874-8b25a808b820/purchase-gallery-arctis-7-2019-white-hero.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid2 img" src="https://media.steelseriescdn.com/thumbs/filer_public/67/3a/673a25f8-0dbe-471b-9d5a-f21806083332/purchase-gallery-arctis-7-2019-white-side.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid3 img" src="https://media.steelseriescdn.com/thumbs/filer_public/ba/5b/ba5b1ece-2cc0-4f6d-8adf-4d5e2ce483bd/purchase-gallery-arctis-7-2019-white-front.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid4 img" src="https://media.steelseriescdn.com/thumbs/filer_public/f6/9b/f69b5fd1-badb-409b-8875-b3bcf9c6d90e/purchase-gallery-arctis-7-2019-white-lay.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="bottom img" src="https://media.steelseriescdn.com/thumbs/filer_public/ea/8c/ea8c5209-dff2-49f7-9d88-b39811229023/purchase-gallery-arctis-7-2019-white-Box.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
    </div>
    <div class="images black-images">
      <img class="top img" src="https://media.steelseriescdn.com/thumbs/filer_public/59/13/591332b6-98fe-4a7b-98ce-a7048b8e0fda/a7_buy_001.jpg__1850x800_q100_crop-scale_optimize_subsampling-2.jpg" alt="">
      <img class="mid1 img" src="https://media.steelseriescdn.com/thumbs/filer_public/99/ef/99efd867-6813-4e70-814f-a200f58f40f6/purchase-gallery-arctis-7-2019-black-hero.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid2 img" src="https://media.steelseriescdn.com/thumbs/filer_public/3e/b5/3eb5e245-3aa0-492d-8531-9ddcaac5da92/purchase-gallery-arctis-7-2019-black-side.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid3 img" src="https://media.steelseriescdn.com/thumbs/filer_public/92/d3/92d34281-0989-44a3-b655-8c22e2569440/purchase-gallery-arctis-7-2019-black-front.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid4 img" src="https://media.steelseriescdn.com/thumbs/filer_public/4a/1f/4a1f8221-51fc-4719-a99b-c62656db5227/purchase-gallery-arctis-7-2019-black-lay.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="bottom img" src="https://media.steelseriescdn.com/thumbs/filer_public/85/97/8597c9b8-c748-4b51-b88d-5539a380a11a/a7_buy_005.jpg__1850x800_q100_crop-scale_optimize_subsampling-2.jpg" alt="">
    </div>
  </div>
  <div class="info">
    <h1 class="title">ARCTIS 7</h1>
    <h2 class="edition">2019 Edition</h2>
    <div class="colors">
      <h1>COLOR:</h1>
      <input type="checkBox" class="white-button-color" id="white-button">
      <label class="white" for="white-button"></label>
      <input type="checkBox" class="black-button-color" id="black-button">
      <label class="black" for="black-button"></label>
    </div>
    <h2 class="price">179,99€</h2>
    <button type="button" name="button">Add to cart</button>
  </div>

解决方法

尝试设置此校准：

.white-button-color:checked~.white-images+img {
  display: none;
}

对此：

.img:checked{
      display: none;
    }

,

可以说，您无法使用css做您想做的事情，也不能“查找”。您只能“向下看”。您无法尝试选择在DOM树中向上的元素。

如果绝对需要执行您要执行的操作，则可以在DOM中重新排序各项，然后使用flex-direction更改外观层次结构