属性 + 的 CSS 规则 DOM 中的同级

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>

起初，这个想法对我来说似乎有点 hack，但我通过 w3c 验证器运行它，并且 yipiee 它通过了嵌入在图例中的输入。 所以我确信我可以使用 javascript/jquery 得到我想要的东西，但我不想至少有一个使用 CSS 实现这一点的概念证明，即使旧的浏览器可能不支持它。

我尝试了这个规则：

.area ul {
    color: red;
 }

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

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

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

谢谢您的帮助。

Answer 1

没有。

“传说中的兄弟姐妹，其中包含
检查的输入...”

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

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

Answer 2

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

Javascript（parentNode）是唯一的选择。

Answer 3

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

另外，我想知道在“检查”复选框后，CSS 模式是否会匹配 input[checked='checked'] ...例如：

.area input + ul{
// 未展开
}

.area 输入[checked='checked'] + ul{
// 展开
但

它不起作用，所以你需要使用 javascript 来实现选中/未选中的更改。 我也会使用之前建议的复选框以外的其他东西。