Html 属性的CSS规则+；DOM中的兄弟姐妹

我有一个表单，其中一个字段集包含几个其他字段集。对于每个字段集，用户可以选中图例旁边的框并展开该字段集（至少在理论上）。我原以为尝试使用纯CSS来实现这个效果会很酷，但我一直在考虑如何根据DOM中两个元素的相互位置编写规则。以下是HTML：

 <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>

但是没有运气。我通过一个简单得多的测试确认了我使用的两种浏览器（Chrome，FF 3.5）都可以执行

input:checked+ul

，如果它只是一个后跟ul的输入。如果我有两个规则（在简化版中），它会切换颜色

但是我不确定如果选中的元素在legend标签中，因此不是UL的直接同级元素，是否有方法引用UL。是否有一种方式可以说“包含已检查输入的图例的兄弟…”

谢谢你的帮助。

没有

“包含 已检查的输入…”

您的问题在于“包含”步骤。你不能像那样向上移动DOM。无法在CSS中基于子元素（或子元素的内容或属性）选择元素

---

您还使用表单元素进行视觉交互（和图例），这很奇怪。我认为使用javascript会更好。我可以想象其他只使用CSS的解决方案，但没有一个是我期望的浏览器兼容的，足以信任的隐藏和显示表单。

我的第一个想法是，这不能单独使用CSS。我认为如果没有javascript，您将无法做到这一点。例如，您可以在jQuery中使用选择器，并通过Javascript获取父节点

另外，我想知道，在“选中”复选框之后，CSS模式是否与输入匹配[checked='checked']。。。比如：

.区域输入+ul{ //未扩展 }

.面积输入[checked='checked']+ul{ //扩大 }

但它不起作用，所以您需要使用javascript来实现选中/未选中的更改。我使用的不是前面建议的复选框。

相邻选择器（+）显然会选择相邻元素。您需要一个父选择器，不幸的是，它不存在（尽管过去曾向w3c提出过一些建议）

---

Javascript（parentNode）是唯一的选择。

使用复选框切换面板视图是非传统的。更常见的是有树状箭头（向下或侧向），或者——如果图例看起来是可点击的——只需点击图例即可切换查看。属性

[checked=“checked”]

不起作用，但您只需执行

输入：checked

，直到今天我才知道，这正是促使这一切发生的原因。我自己也不知道。真有趣！如果我真的很固执，并且尽可能多地保持CSS中的视觉交互，我可以简单地将整个字段集的类更改为“可见”或“选中”（通过js）并制定规则，使扩展的字段集在CSS中对该类可见……我认为真正让人们对这个想法感到反感的是可检查的字段集。这就是为什么我做的第一件事就是验证它。想象一下一种医疗形式，你必须选择家族史的类型。在我看来，从语义上讲，保持简单并最大限度地减少用户负担的方法是列出基本人群：“癌症”、“精神病”、“心力衰竭”，然后如果他们选择其中一个，询问更多细节。因此，它不仅仅是一个互动设备，主要群体是对一个更大问题的实际选择……这会引发子问题。因此，如果我希望我的表单尽可能地布局（这意味着选中一个框不会突然改变DOM中的选择——例如，将其转换为标题），并且还将子问题实际保留为主要问题的子问题（而不是在第一个问题旁边附加一个浮动的字段集），那么，对我来说有意义的是将每个选择扩展到一个完整的字段集，而初始选择的最佳角色——在这一点上——是该字段集的传奇。此外，一旦展开，它在视觉上看起来是正确的。至少我是这么说的，我相信。有趣的用例。简单地用js更改类正是我的建议。祝你好运

.area ul {
    color: red;
 }

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