如何解决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
更改外观层次结构
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。