是否有选择 dt 及其关联的 dd 元素的 CSS 选择器？答案

【问题标题】：Is there a CSS selector that selects a dt and its associated dd elements?是否有选择 dt 及其关联的 dd 元素的 CSS 选择器？
【发布时间】：2012-11-12 13:04:53
【问题描述】：

定义列表是标记某些关键字与一个或多个值相关联的信息的好方法。

既然 dt 与 一个或多个 dd 元素之间存在语义关联，有没有办法使用 CSS 来选择这些关联的项目。

考虑以下 html：

<dl>
  <dt>Foo</dt><dd>foo</dd>
  <dt>Bar</dt><dd>bar</dd>
  <dt>Baz</dt><dd>baz</dd>
</dl>

如果我想将此 dl 呈现为：

-------  -------  -------
| Foo |  | Bar |  | Baz |
| foo |  | bar |  | baz |
-------  -------  -------

我需要一种方法来表示 dt/dd 对第一个向左浮动、获得边框等等。

现在，我知道如何做到这一点的唯一方法是为每组 dt/dd 元素制作单独的 dls：

<dl>
  <dt>Foo</dt><dd>foo</dd>
</dl>
<dl>
  <dt>Bar</dt><dd>bar</dd>
</dl>
<dl>
  <dt>Baz</dt><dd>baz</dd>
</dl>

从语义的角度来看这很糟糕，这些项目都是一个列表的成员。

那么是否有选择器或选择器组合允许我对 dt/dd 元素组进行操作？

更新

我正在寻找/提议的是类似于伪元素 list-item 的东西，其中 dl:list-item 将选择一个 dt 和所有关联的 dd 元素作为一个项目，其方式与first-line 伪元素允许选择一组字符作为一个单元。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

没有，因为<dt> 可以有多个<dd>s，反之亦然。

但也许：

dt + dd {  }

在你的情况下就足够了

【讨论】：

我知道一对多的关系，这就是为什么我说“dt 与一个或多个 dd 元素之间存在语义关联”。 dt + dd 不允许将 dt 及其关联的 dd 元素作为一个单元进行操作。
这是一个多对多的关系，考虑一下：<dt/><dt/><dd/><dd/><dd/>

【解决方案2】：

这是对 knittl 的回答。在评论中没有足够的空间或能力来充分回应 knittl 的答案，并且此响应不是问题的一部分，因为它解决了问题的答案。所以，我会继续发布它作为答案。

knittl 说我正在寻找的东西是不可能的。我怀疑是这样，但在阅读各种标准时我可能会遗漏一些东西。

但是，提供的理由显然不正确。

knittl 断言：

不，因为<dt> 可以有多个<dd>s 和其他方式圆。

如果他停止说“不，没有”，那将是正确的答案。

因此，声称这是不可能的，因为我们在提议的分组中有不确定数量的元素。

可以通过提供一种算法来为作为 dl 子级的任何 dt 和 dd 元素集生成一组相关元素，从而直接反驳这一说法。此外，可以通过对文档的不确定部分进行操作的现有伪元素的反例来证明这一点。

实现将相关 dt 和 dd 元素分组的伪元素的逻辑并不难。所以任何一种类型的元素数量都没有密切关系。

对于给定的 DL 元素：

指定集合类型以包含dt 和dd 元素，称为dt_dd_group
开始收集dt_dd_groups，称为all_groups
检查每个子元素（非递归）：
- 如果元素是 dt：
  - 如果这是第一个元素或前一个元素不是dt：
    - 创建一个新的dt_dd_group
    - 将新的dt_dd_group 附加到all_groups
    - 将元素附加到dt_dd_group
  - 否则将元素附加到当前dt_dd_group
- 否则，如果元素是 dd：
  - 如果这是第一个元素：
    - 创建一个新的dt_dd_group
    - 将新的dt_dd_group 附加到all_groups
    - 将元素附加到dt_dd_group
  - 将元素附加到当前dt_dd_group
返回收藏all_groups

该算法可以轻松地将 dl 中的一组 dt/dd 元素划分为相关的集合。对于任何合法的 dl，包括没有提供初始 dt 元素的合规但病态的情况：

<dl><dd>foo</dd><dd>bar</dd><dl>

要说这种选择模式是不可能的，因为这样一个组中的数量不定或 dt 或 dd 元素被证明是错误的。段落第一行的字母数量也是不确定的，但 :first-line 伪元素是 CSS 标准的一部分。

可以合理地说，我正在寻找的选择模式是不可能的，因为 CSS 工作组没有考虑这个问题，或者他们考虑了这个问题并出于某种原因选择不将其包含在当前标准中。

因此，总而言之，虽然在一组语义相关的 dt 和 dd 标签上操作的选择器在理论上是可行的，但还没有实现这样的选择器。

【讨论】：

可能没有选择器可以直接执行此操作，但我认为将 ID 与通用兄弟组合器结合使用可能会奏效。请参阅下面的代码以获取我的答案。

【解决方案3】：

如何将 ID 与通用同级组合器结合使用？

    <html>
    <head>
          <style type="text/css">
                #id1 ~ DD { color: red; }
                #id2 ~ DD { color: blue; }
          </style>
    </head>
    <body>
        <dl>
        <dt id="id1">term 1</dt>
            <dd>def 1a</dd>
            <dd>def 1b</dd>

        <dt id="id2">term 2</dt>
            <dd>def 2a</dd>
            <dd>def 2b</dd>
        </dl>
    </body>
</html>

看看这个小提琴，它似乎做你想做的......http://jsfiddle.net/6qEHQ/

【讨论】：

嘿，很抱歉您的答案被删除了。显然我们当时忽略了您的编辑。我刚刚遇到了这个问题，并为您恢复了答案。
这里的限制是一般的兄弟组合器不允许你选择直到一个特定的元素，所以即使没有ID也没有办法使用它为以后的 ID 覆盖它，如您的 #id2 ~ DD { color: blue; } 规则中所示。
@BoltClock 感谢您回复我的答案。这是我第一次在 SO 上发帖，我在 SF 上已经有一段时间了，
@BoltClock 我不是 100% 确定您所说的“后来的 ID”是什么意思，ID 在页面上不是唯一的吗？
在您的示例中，#id2 位于 #id1 之后。我想那应该是“后来的父母”:)