複選框黑客語法難點

Question

我想同時對一個標籤進行樣式設置，並在複選框被選中時顯示div。我已經找到了辦法之一，但不是兩種，我不明白爲什麼。注意這兩個示例中的CSS完全相同，並且是：

input { 
    display: none 
} 

.layerpic { 
    height: 100px; 
    width: 100px; 
    background: red; 
    opacity: 1; 
    float: left; 
} 

label { 
    clear: none; 
    float: left; 
} 

.xyz input:checked + .layerpic{ 
    opacity: 0.5; 
} 

.xyz input:checked + label { 
    font-weight: bold; 
} 

現在HTML。這個例子允許div受到影響，但不是標籤。請注意，唯一的區別是在HTML當標籤自帶的輸入之前：

<div class ="xyz"> 
    <label class="ribs" for="hider2">Hide layer</label> 
    <input type="checkbox" id="hider2"> 
    <div class="layerpic"> hi 
    </div> 
</div> 

這個例子允許受影響的標籤，而不是DIV：

<div class ="xyz"> 
    <input type="checkbox" id="hider2"> 
    <label class="ribs" for="hider2">Hide layer</label> 
    <div class="layerpic"> hi 
    </div> 
</div> 

任何人都可以解釋爲什麼不同的元素只是通過翻轉哪個HTML首先受到影響，並且可以在複選框被選中時影響這兩個元素？

Answer 1

您需要重新安排你的HTML，然後使用+和~選擇

input { 
 
    display: none 
 
} 
 

 
.layerpic { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    opacity: 1; 
 
    float: left; 
 
} 
 

 
label { 
 
    clear: none; 
 
    float: left; 
 
} 
 

 
.xyz input:checked+.layerpic { 
 
    opacity: 0.5; 
 
} 
 

 
.xyz input:checked~label { 
 
    font-weight: bold; 
 
}

<div class="xyz"> 
 
    <input type="checkbox" id="hider2"> 
 
    <div class="layerpic"> hi</div> 
 
    <label class="ribs" for="hider2">Hide layer</label> 
 
</div>