2012-09-17 37 views
4

我有我已經從這個網站借自定義單選按鈕編輯:http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/我如何選擇相鄰到嵌套一個

不幸的是,我使用的是一個有用的插件,我不能輕易修改的填充我的DOM與標籤內嵌套的輸入,使得...

<label> 
    <input class="regular-radio"> 

我想用選擇.regular-radio + label選擇的標籤。

<input class="regular-radio"> 
<label> 

我已經證明了我的例子在這裏:但是,它只能與工作http://jsfiddle.net/BR3MB/

我會如何修改CSS工作過父標籤,而不是相鄰的一個?
在這種情況下,我真的很困擾編輯DOM,因爲已經有很多依賴於這個結構。

+0

你想選擇家長還是孩子?這個問題似乎不清楚。你應該給出一個DOM結構的明確例子,以及你試圖在該結構中選擇哪個元素。 – Anurag

+0

Anurag,上面有DOM的例子,請看JS小提琴 – yekta

回答

3

不幸的是,目前不能使用CSS來完成,因爲CSS只能從右到左讀取。這意味着選擇器中最右邊的元素將是接收樣式的元素,最右邊的元素必須始終是選擇器中左邊任何元素的子元素或同級元素。與你的問題,是你想要風格的元素是父母。

作品中有一個父選擇器(http://www.red-team-design.com/css-parent-selector),但在此之前,您將不得不訴諸使用JavaScript。

說到這裏,我認爲在這種情況下最好的解決方案是將插件的輸出更改爲更有用的東西(如果可能的話)。

+1

我結束了重新考慮插件的道路,謝謝。 – yekta

+0

選擇器的主題由最右邊的元素表示,與從右向左讀取選擇器無關。即使您從左向右閱讀選擇器,您仍然會以最右邊的複合選擇器爲主題。例如,'。常規無線電+標籤「可以意指」選擇任何標籤「,其直接跟隨具有」常規無線電「類的元素,或」使用常規無線電「檢查每個元素並選擇直接跟隨的」標籤「它」。在這兩種情況下,你都試圖匹配和應用樣式到'label',而不是'.regular-radio'。 – BoltClock

+0

選擇器4中的主題選擇器在技術上不是父選擇器;它所做的就是更改哪個複合選擇器代表選擇器的主題。術語「主題」實際上在[spec](http://www.w3.org/TR/selectors4/#subject)中很好定義,甚至可以回到[CSS2.1](http:// www .w3.org/TR/CSS21/selector.html#subject)和[Selectors 3](http://www.w3.org/TR/selectors/#subjects-of-the-selector)。另一方面,RTL匹配僅僅是一個對規範沒有任何影響的實現細節。 – BoltClock

1

可悲的是沒有一個CSS選擇器爲父母造型。獲得父母風格的唯一方法是通過Javascript。在CSS技巧,Chris Coyier talks about the upsides and downsides的辯論有或沒有這個選擇器添加到規範。就我個人而言,我希望它存在,但希望永遠不要讓我的代碼工作。

+0

在句法上,組合器比僞類更有意義。在jQuery中,':parent'的意思是':not(:empty)',它實際上更有意義,因爲你說「選擇這個if if是父項」而不是「選擇這個元素的父項」。我們可以像使用':: parent'一樣使用僞元素,但是父元素是一個實際的元素,而不是僞元素,所以也沒有任何意義。 – BoltClock

+0

絕對與你同意。我指的是那些沒有辦法選擇父級的CSS,但在jQuery中,我可能會有很多方法。 – cereallarceny

0

在CSS中不可能選擇元素的父元素。您可能不得不使用類似這樣的方法來選擇它:

label:nth-of-type(x) {} 

其中x是父級中標籤的編號。