我可以影響div之外的元素嗎？我目前純粹使用CSS？

Question

我目前正在爲我的易趣帳戶創建一個列表模板，所以如果可能的話，我需要創建一個不使用JS的解決方案。我試圖使用無線電黑客切換在「tabinfo」div內查看的文本，但我的無線電和我想要更改的「display：」屬性的文本位於不同的div中。是否可以使用純粹的CSS選擇器來選擇#text？我使用的是引導佈局和已經創建了下面的HTML代碼：

<div class="col-xs-2"> 
    <input id="tab1" type="radio" name="tabs"> 
    <label for="tab1">Foo</label> 
</div> 
<div class="col-xs-2"> 
    <input id="tab2" type="radio" name="tabs"> 
    <label for="tab2">Bar</label> 
</div> 
<div class="col-xs-2"> 
    <input id="tab3" type="radio" name="tabs" checked> 
    <label for="tab3">Foo Bar</label> 
</div> 
<div class="col-xs-12"> 
    <div class="tabinfo"> 
     <div id="text1"> 
     </div> 
     <div id="text2"> 
     </div> 
     <div id="text3"> 
     </div> 
    </div> 
</div> 

下面CSS：

label { 
    border: solid; 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-bottom: none; 
    border-color: rgb(211,211,205); 
    border-width: 2px; 
    color: rgb(12,174,175); 
    background-color: rgb(247,247,247); 
} 

input:checked + label { 
    background-color: #fff; 
    color: rgb(94,94,94); 
} 

label:hover { 
    cursor: pointer; 
} 

.tabinfo { 
    border: solid; 
    border-color: rgb(211,211,205); 
    border-width: 2px; 
    border-top-right-radius: 10px; 
} 

#tab1:checked ~ .col-xs-12 .tabinfo #text1, 
#tab2:checked ~ .col-xs-12 .tabinfo #text2, 
#tab3:checked ~ .col-xs-12 .tabinfo #text3 { 
    display: block!important; 
} 

正如你可能已經猜到了，上面並沒有因爲#texts和工作#tabs位於不同的div中。有沒有任何解決方法或任何解決方案沒有打破引導佈局？提前致謝。

Answer 1

脆性溶液都可以使用，但是這涉及移動<input>元件遠離<label>元素，並且您指定了任何HTML更改的一個要求，即任何更改

...不會破壞[Bootstrap]佈局。

我不認爲我變化打破這種佈局，但我不能完全肯定，所以你需要把這個評價自己。

即前導碼放在一邊，不過，我已經修改了你的HTML以下：

<input id="tab1" type="radio" name="tabs" /> 
<input id="tab2" type="radio" name="tabs" /> 
<input id="tab3" type="radio" name="tabs" /> 
<div class="col-xs-2"> 
    <label for="tab1">Foo</label> 
</div> 
<div class="col-xs-2"> 
    <label for="tab2">Bar</label> 
</div> 
<div class="col-xs-2"> 
    <label for="tab3">Foo Bar</label> 
</div> 
<div class="col-xs-12"> 
    <div class="tabinfo"> 
    <div id="text1"> 
    </div> 
    <div id="text2"> 
    </div> 
    <div id="text3"> 
    </div> 
    </div> 
</div> 

這種方法使我們能夠採取的<label>元素的檢查能力的優勢/無論在哪裏，取消其相關<input>元素在它可能位於的文檔中（只要for屬性標識該關聯的<input>的id）;將<input>元素置於內容之前允許我們使用兄弟組合器來查找包含相關內容的元素以進行樣式設置。

假設您希望保留被檢查的<input>的視覺效果，否則，我們也使用CSS生成的內容來模擬選中或未選中的廣播;這可以使用一些微調，但：

/* Here we hide all <div> elements within the .tabinfo 
 
    element, and also all <input> elements whose 'name' 
 
    attribute is equal to 'tabs' and whose 'type' is 
 
    equal to 'radio': */ 
 

 
.tabinfo div, 
 
input[name=tabs][type=radio] { 
 
    display: none; 
 
} 
 

 

 
/* This styles the generated content of the ::before 
 
    pseudo-element to show the attribute-value of the 
 
    element's 'id' attribute; purely for the purposes 
 
    of this demo: */ 
 

 
div[id^=text]::before { 
 
    content: attr(id); 
 
} 
 

 

 
/* Styling the generated content, the ::before pseudo- 
 
    element, of the <label> elements, in order to 
 
    emulate the moved radio <input>: */ 
 

 
label::before { 
 
    /* An empty string, content is required in order for 
 
    the pseudo-element to be visible on the page: */ 
 
    content: ''; 
 
    /* To allow the pseudo-element to have specified 
 
    width and height values: */ 
 
    display: inline-block; 
 
    height: 1em; 
 
    width: 1em; 
 
    /* To include the border, and any padding, widths 
 
    in the calculations for the element's size: */ 
 
    box-sizing: border-box; 
 
    background-color: #eee; 
 
    border: 1px solid #999; 
 

 
    /* In order for the pseudo-radio to have a round 
 
    shape/border: */ 
 
    border-radius: 50%; 
 
    margin-right: 0.2em; 
 
} 
 

 
/* This selector styles the <label> element whose 'for' 
 
    attribute is equal to 'tab1', which is a child of 
 
    the div.col-xs-2 element which itself is a general 
 
    sibling of the #tab1 element when that element is 
 
    checked; this is the 'checked' style of the pseudo- 
 
    'radio' generated content: */ 
 
#tab1:checked~div.col-xs-2>label[for=tab1]::before { 
 
    background-color: #666; 
 
    box-shadow: inset 0 0 0 3px #fff; 
 
} 
 

 
/* This selects the element with an id of 'text1', 
 
    inside of a <div> with the class of 'col-xs-12', 
 
    which is a general sibling of the '#tab1' element 
 
    when that element is checked: */ 
 
#tab1:checked~div.col-xs-12 #text1 { 
 

 
    /* Here we make the content of that element visible: */ 
 
    display: block; 
 
} 
 

 
#tab2:checked~div.col-xs-2>label[for=tab2]::before { 
 
    background-color: #666; 
 
    box-shadow: inset 0 0 0 3px #fff; 
 
} 
 

 
#tab2:checked~div.col-xs-12 #text2 { 
 
    display: block; 
 
} 
 

 
#tab3:checked~div.col-xs-2>label[for=tab3]::before { 
 
    background-color: #666; 
 
    box-shadow: inset 0 0 0 3px #fff; 
 
} 
 

 
#tab3:checked~div.col-xs-12 #text3 { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<input id="tab1" type="radio" name="tabs" /> 
 
<input id="tab2" type="radio" name="tabs" /> 
 
<input id="tab3" type="radio" name="tabs" /> 
 
<div class="col-xs-2"> 
 
    <label for="tab1">Foo</label> 
 
</div> 
 
<div class="col-xs-2"> 
 
    <label for="tab2">Bar</label> 
 
</div> 
 
<div class="col-xs-2"> 
 
    <label for="tab3">Foo Bar</label> 
 
</div> 
 
<div class="col-xs-12"> 
 
    <div class="tabinfo"> 
 
    <div id="text1"> 
 
    </div> 
 
    <div id="text2"> 
 
    </div> 
 
    <div id="text3"> 
 
    </div> 
 
    </div> 
 
</div>

JS Fiddle demo。

你可以從形成到顯示相關檢查<input>元素這些規則需要一些精度和重複的元素的規則看，因爲CSS沒有的this概念，所以，給定一個data-affectedby屬性，其值可以被設置爲相關<input>的id，有沒有辦法，我們可以有沿的一條規則：

input[id^=tab]:checked ~ .col-xs-12 [data-affectedby=this.id] 

Answer 2

這將是非常困難的（也許不可能），當在不同層次上使用div時。

如果您將HTML結構稍微扁平化，您可能可以實現接近您所尋找的內容。但請注意，它意味着擺脫大部分Bootstrap幫助程序佈局div。

例HTML：

<input id="tab1" type="radio" name="tabs"> 
<label for="tab1">Foo</label> 

<input id="tab2" type="radio" name="tabs"> 
<label for="tab2">Bar</label> 

<input id="tab3" type="radio" name="tabs" checked> 
<label for="tab3">Foo Bar</label> 

<div id="text1" class="tabinfo">text1</div> 
<div id="text2" class="tabinfo">text2</div> 
<div id="text3" class="tabinfo">text3</div> 

實施例的CSS：

label { 
    border: solid; 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-bottom: none; 
    border-color: rgb(211,211,205); 
    border-width: 2px; 
    color: rgb(12,174,175); 
    background-color: rgb(247,247,247); 
} 
input:checked + label { 
    background-color: #fff; 
    color: rgb(94,94,94); 
} 
label:hover { 
    cursor: pointer; 
} 
.tabinfo { 
    display:none; 
} 
#tab1:checked ~ #text1{ 
    display:block; 
} 
#tab2:checked ~ #text2{ 
    display:block; 
} 
#tab3:checked ~ #text3{ 
    display:block; 
} 

見我在這裏所作的示例：https://plnkr.co/edit/DyID8me4bM7VPCI9l6Cg?p=preview