1

我所拥有的是一个表单，其中一个字段集包含几个其他字段集。对于每个字段集，用户可以选中图例旁边的框并展开该字段集（至少在理论上）。我认为尝试使用纯 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 验证器运行它，并且 yipiee 它通过嵌入在图例中的输入。所以我确信我可以在使用 javascript/jquery 之后得到我想要的东西，但我不想至少有一个使用 CSS 做的概念证明，即使旧的浏览器可能不支持它。

我试过这个规则：

.area ul {
    color: red;
 }

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

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

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

谢谢您的帮助。

4

3 回答 3

3

没有。

“包含已检查输入的图例的兄弟姐妹......”

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

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

于 2009-08-12T21:23:24.267 回答
0

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

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

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

.area input[checked='checked'] + ul{ // 展开 }

但它不起作用，因此您需要使用 javascript 来实现已选中/未选中的更改。我也会使用前面建议的复选框以外的东西。

于 2009-08-12T21:37:52.083 回答
0

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

Javascript（parentNode）是唯一的选择。

于 2009-08-12T21:41:49.627 回答