有沒有辦法使用CSS來顯示/隱藏不是兄弟姐妹的元素？

Question

我有一些無線電選項，我想要顯示/隱藏類。我有一些有這些類的div。

HTML：

<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">one</label> 
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">two</label> 

<div class="one">abc</div> 
<div class="two">def</div> 

CSS：

input.one:checked ~ a.one { display:inline; } 
input.two:checked ~ a.two { display:inline; } 

input.one:checked ~ a:not(.one) { display:none; } 
input.two:checked ~ a:not(.two) { display:none; } 

現在我的標記必須是這樣的：

<div class="row"> 
<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">one</label> 
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">two</label> 
</div> 

<div class="one">abc</div> 
<div class="two">def</div> 

新的標記意味着輸入不再是兄妹的div和CSS不再適用（據我所知）。 我已經嘗試了所有我能想到的選擇器組合，也許這對於純CSS來說是不可能的。我的目標是避免JavaScript可以在CSS中工作。如果這是一個解決方案，我願意研究SASS/LESS。

Answer 1

基礎上加比評論我調整了標記看起來更象這樣： HTML

<div class="row"> 
<label for="one" class="select radlabel">one</label> 
<label for="two" class="select radlabel">two</label> 
</div> 
<input type="radio" class="one radioselect hide" value="one" id="one" name="opts" /> 
<input type="radio" class="two radioselect hide" value="two" id="two" name="opts" /> 
<div class="one">abc</div> 
<div class="two">def</div> 

CSS

input.one:checked ~ a.one { display:inline; } 
input.two:checked ~ a.two { display:inline; } 

input.one:checked ~ a:not(.one) { display:none; } 
input.two:checked ~ a:not(.two) { display:none; } 

過濾的工作，但無線電選項不可見，最好的，我已經能夠做到的視覺線索一直在給標籤造型時：活躍。

它適合我的需求。

Answer 2

我已經重新安排了您的HTML以獲取您之後的功能。首先，我將您的div上的課程重新命名爲顯示並隱藏它們。

.three { display:none; } 
.four { display:none; } 

接下來，您將創建邏輯單選按鈕時檢查您顯示一個div。

input.one[type=radio]:checked ~ .three { display:block; } 
input.two[type=radio]:checked ~ .four { display:block; } 

現在，一旦編譯成一個它應該如下：

.three { display:none;color:#ff0000;} 
 
.four { display:none;color:#FF8C00;} 
 

 
input.one[type=radio]:checked ~ .three { display:block; } 
 
input.two[type=radio]:checked ~ .four { display:block; }

<div class="row"> 
 
<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">Radio one</label> 
 
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">Radio two</label> 
 

 
<div class="three">Radio one DIV</div> 
 
<div class="four">Radio two DIV</div> 
 

 

 
</div>

讓我知道這對你的作品。