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

回答

相关问题