DOM中屬性+同級的CSS規則

我所擁有的是一個表單，其中一個fieldset包含其他幾個fieldset。對於每個字段集，用戶可以選中圖例旁邊的框並展開該字段集（理論上至少）。我認爲嘗試使用純CSS作爲效果會很酷，但是我更加關注如何基於DOM中的兩個元素位置來編寫規則。這裏的HTML：DOM中屬性+同級的CSS規則

<fieldset id="areasofinterest"> 
    <legend>Areas of Interest Survey</legend> 

<p>Please Check The Areas Applicable to you and Answer the Coorepsonding Questions.</p> 

<!--Area 1 Checkbox and Questions --> 
<fieldset class="area"> 
    <legend> 
     <input type="checkbox" value="area1" id="area1" /> 
     <label for="area1"> Area 1 :</label> 
    </legend> 
    <ul> 
     <li> 
      <label for="area1_q1">Q1</label> 
      <input type="text" name="area1_q1" id="area1_q1" /> 
     </li> 
     <li> 
      <label for="area1_q2">Q2</label> 
      <input type="text" name="area1_q2" id="area1_q2" /> 
     </li> 
    </ul> 
</fieldset> 

<!--Area 2 Checkbox and Questions --> 
<fieldset class="area"> 
    <legend> 
     <input type="checkbox" value="area2" id="area2" /> 
     <label for="other"> Area 2 :</label> 
    </legend> 

    <ul> 
     <li> 
      <label for="area2_q1">Q1</label> 
      <input type="text" name="area2_q1" id="area2_q1" /> 
     </li> 
     <li> 
      <label for="area2_q2">Q2</label> 
      <input type="text" name="area2_q2" id="area2_q2" /> 
     </li> 
    </ul> 
</fieldset> 

    </fieldset>

起初的想法似乎有點劈十歲上下給我，但我跑它通過W3C驗證，並yipiee它嵌入傳說中的輸入通過。所以我確信我可以在使用javascript/jquery後得到我的東西，但是我不想用CSS來做這個概念的證明，儘管舊版瀏覽器可能不支持它。

我想這條規則：

.area ul { 
    color: red; 
} 

.area input:checked + ul { 
    color: blue; 
}

，但沒有運氣。我確認了一個簡單得多的測試，我正在使用的兩個瀏覽器（Chrome，FF 3.5）可以做input:checked + ul，如果它只是一個輸入後跟一個ul。如果我有兩個規則（在簡化版本中），它會切換顏色。

但我不知道是否有方法可以參考UL，如果檢查的元素是在圖例標記中，而不是UL的直接兄弟。有沒有辦法說「傳奇的兄弟姐妹包含被檢查的輸入......」？

感謝您的幫助。

來源

2009-08-12 Anthony

使用複選框切換面板的視圖是非常規的。樹形箭頭（向下或側向）更常見，或者 - 如果圖例看起來是可點擊的 - 只需單擊圖例即可切換查看。 – 2009-08-12 20:43:19

沒有。

「其含有輸入傳說的兄弟姐妹被檢查......」

您的問題是在「遏制」的一步。你不能像這樣向上移動DOM。不能在CSS中根據子元素（或子元素的內容或屬性）選擇元素。

您還正在使用表單元素進行視覺交互（和圖例），這很奇怪。我認爲你用javascript更好。我可以想象其他僅限於CSS的解決方案，但沒有一個我期望能夠與瀏覽器兼容，足以信任隱藏和顯示錶單。

來源

2009-08-12 21:23:24

如果我想要非常固執並儘可能地保持CSS內的視覺交互，那麼我可以簡單地將整個字段集的類更改爲「可見」或「檢查」（通過js），並將規則適用於擴展的字段集在CSS中被該類可見... – Anthony 2009-08-12 22:04:26

我認爲真正拋棄這種想法的人是可檢查的字段集。這就是爲什麼我做的第一件事是驗證它。想象一下你必須選擇一種家庭史的醫學形式。在語義上，在我看來，保持簡單並最大限度地減少用戶壓力的方法是獲得一個基本羣體列表：「巨蟹座」，「心理疾病」，「心力衰竭」，然後如果他們選擇其中一個，請詢問更多細節。所以這不僅僅是一個交互設備，主要羣體是一個更大的問題的實際選擇... – Anthony 2009-08-12 22:09:24

這提出了子問題。因此，如果我希望我的表單儘可能地佈局（例如，檢查框不會突然更改DOM中的選擇 - 例如將它轉換爲標題），並且還會將子問題實際上保留爲兒童的主要問題（而不是針對第一個問題附加的額外字段集），那麼對我而言，有意義的是讓每個選項都擴展到一個完整的字段集，並且是啓動選擇的最佳角色 - 在此點 - 是該字段的傳說。另外，它看起來正確，一旦它膨脹出來。至少，我說過。 – Anthony 2009-08-12 22:14:25

我的第一個想法是，這不會單獨使用CSS。我不認爲你可以在沒有javascript的情況下做到這一點。例如，您可以在jQuery中使用選擇器，並通過Javascript獲取父節點。

另外，我想知道，後 '檢查' 複選框中，CSS模式將匹配輸入[檢查= '檢查'] ...等：

.area輸入+ UL { //不膨脹 }

.area輸入[檢查=「檢查」] + UL {// 擴大 }

它沒有工作，但這樣你需要使用JavaScript只是爲了實現在檢查的變化/未選中。如前所述，我會使用除複選框之外的其他東西。

來源

2009-08-12 21:37:52 Lewis

'[checked =「checked」]'這個屬性不起作用，但是你可以簡單地做'輸入：checked'，直到今天我才知道，這正是促成這一點的原因。 – Anthony 2009-08-12 22:02:01

不知道我自己。那很有意思！ – Lewis 2009-08-12 22:24:11

相鄰選擇符（+）顯然選擇相鄰元素。你需要一個父母選擇器，不幸的是這個父母選擇器不存在（儘管過去對w3c提出了一些建議）。

Javascript（parentNode）是唯一的選擇。

來源

2009-08-12 21:41:49 vise

DOM中屬性+同級的CSS規則

回答

相關問題