是否有一个 CSS 选择器可以选择 dt 及其关联的 dd 元素？

StackOverflow https://stackoverflow.com/questions/1429483

  •  07-07-2019
  •  | 
  •  

题

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

由于 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 伪元素允许选择一组字符作为一个单元。

有帮助吗？

解决方案 2

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

knittl 说我正在寻找的东西是不可能的。我怀疑情况确实如此，但在阅读各种标准时我可能会错过一些东西。

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

尼特尔断言：

不，不存在，因为 <dt> 可以有多个 <dd>S和反过来。

如果他以“不，没有”结束，那将是正确的答案。

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

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

实现将相关 dt 和 dd 元素分组的伪元素的逻辑并不困难。因此，这两种类型的元素数量没有密切关系。

对于给定的 DL 元素：

  • 指定要包含的集合类型 dt 和 dd 称为 a 的元素 dt_dd_group
  • 开始收集 dt_dd_group被称为 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 标签进行操作的选择器在理论上是可能的， 没有实现这样的选择器.

其他提示

不，没有<！>＃8217; t因为<dt>可以有多个<dd> s而反之亦然。

但也许：

dt + dd {  }

就足够了

如何将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/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top