我努力的目標/在不同的家長選擇元素的CSS

看看下面的代碼...我努力的目標/在不同的家長選擇元素的CSS

正如你可以看到「HAZEL（NUT）」和「HASSEL（NOD）」已與複選框不同的父級。這就是爲什麼我認爲複選框工作的字體重量部分，但不工作選擇＃榛子或#hasselnod。如果有人可以幫助我選擇#hazelnut和#hasselnod的正確選擇，我將非常感激。

希望這個很清楚，我對HTML和CSS很新手，所以無法解釋我的意思！

HTML瀏覽：

<div class="container" id="lang"> 
<input type="radio" id="english" name="language" value="english" checked="checked" /> 
<input type="radio" id="dansk" name="language" value="dansk" /> 
<ul> 
<label for="english"><li id="en">ENGLISH</li></label> 
<label for="dansk"><li id="dk">DANSK</li></label> 
</ul> 
</div> 

<div class="container" id="myname"> 
<h1 id="hazelnut">HAZEL<br>(NUT)</h1> 
<h1 id="hasselnod">HASSEL<br>(NØD)</h1> 
</div>

此處的CSS：

#dansk:checked ~ * #dk { 
    font-weight: 700; 
} 

#dansk:checked ~ * #en { 
    cursor: pointer; 
} 

#dansk:checked * #hazelnut { 
    display: none; 
} 

#english:checked ~ * #en { 
    font-weight: 700; 
} 

#english:checked ~ * #dk { 
    cursor: pointer; 
} 

#english:checked * #hasselnod { 
    display: none; 
}

非常感謝！

來源

2014-02-28 hazertazer

在CSS中，對於要使用的~選擇器，元素必須具有相同的父級。正如我所看到的，恐怕你不得不在這裏涉及一些JavaScript。

我會做什麼，是有單選按鈕，可以改變#lang數據屬性，所以這將是透明的CSS：

<div id="lang" data-value="en">

，然後用下面的CSS規則：

/*when #myname is preceded by #lang with data-value attribute 'en', 
select direct child #hasselnod */ 
#lang[data-value='en'] ~ #myname > #hasselnod { 
    /* and set its display to none*/ 
    display: none; 
}

現在，我們需要使用javascript更改的data-value屬性。看的onclick功能在下面的代碼片段：

<input type="radio" id="dansk" name="language" value="dansk" 
     onclick="this.parentNode.setAttribute('data-value', 'da')" />

看看這個小提琴：http://jsfiddle.net/wkL7q/2/

來源

2014-02-28 21:20:00 TastySpaceApple

'〜'是[通用兄弟組合]（http://www.w3.org/TR/selectors/#general-sibling-combinators），而不是[之前]（https： //開發商.mozilla.org/zh-CN/docs/Web/CSS/:: before）選擇器FYI ...無論如何，你的答案是好的 –

實際上，這是一種不必要的和令人困惑的過度簡化。除去。 – TastySpaceApple

要定位的元素在不同的家長，我認爲你需要使用jQuery：

$("#lang input").change(function() { 
    var lang = $(this).val(); 
    if(lang == 'dansk') { 
     $('#hazelnut').hide(); 
     $('#hasselnod').show(); 
    } else { 
     $('#hazelnut').show(); 
     $('#hasselnod').hide(); 
    } 
});

看看這個小提琴：http://jsfiddle.net/X3ZtK/

來源

2014-02-28 21:35:00

我努力的目標/在不同的家長選擇元素的CSS

回答

相關問題