Question

我所拥有的是一个包含一个包含多个其他字段集的字段集的表单。对于每个字段集，用户可以选中图例旁边的框并展开该字段集（至少在理论上）。我认为尝试使用纯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>

起初这个想法对我来说似乎有些黑客攻击，但我通过w3c验证器运行它，并且通过嵌入传说中的输入来传递它。所以我确信我可以得到我在使用javascript / jquery之后的内容，但是我讨厌至少有一个使用CSS的概念证明，即使旧的浏览器可能不支持它。

我尝试了这条规则：

.area ul {
    color: red;
 }

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

但没有运气。我确认了一个更简单的测试，即我正在使用的两个浏览器（Chrome，FF 3.5）都可以input:checked + ul，如果它只是一个输入后跟一个ul。如果我有两个规则（在简化版中），它会切换颜色。

但是我不确定是否有一种方法可以引用UL，如果已检查的元素在图例标记中是whith，因此不是UL的直接兄弟。有没有办法说“含有输入的传说中的兄弟姐妹......”？

感谢您的帮助。

Answer 1

不。

“包含的传说的兄弟姐妹检查的输入......“

您的问题出在“包含”步骤。你无法像这样向上移动DOM。无法在CSS中根据子项（或子项的内容或属性）选择元素。

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

Answer 2

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

另外，我想知道，在'检查'一个复选框之后，CSS模式是否匹配输入[checked ='checked'] ...如：

.area input + ul { //没有扩大 }

.area输入[checked ='checked'] + ul { //扩展 }

它没有用，所以你需要使用javascript来实现check / unchecked中的更改。我之前也建议使用除复选框之外的其他东西。

Answer 3

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

Javascript（parentNode）是唯一的选择。

DOM中属性+兄弟的CSS规则

3 个答案: