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

dao*_*oad 6 css css-selectors

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

由于 dt 与一个或多个dd 元素之间存在语义关联,因此是否有一种方法可以使用 CSS 来选择这些关联项。

考虑以下 html:

<dl>
  <dt>Foo</dt><dd>foo</dd>
  <dt>Bar</dt><dd>bar</dd>
  <dt>Baz</dt><dd>baz</dd>
</dl>
Run Code Online (Sandbox Code Playgroud)

如果我想将此 dl 呈现为:

-------  -------  -------
| Foo |  | Bar |  | Baz |
| foo |  | bar |  | baz |
-------  -------  -------
Run Code Online (Sandbox Code Playgroud)

我需要一种方法来表示 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>
Run Code Online (Sandbox Code Playgroud)

从语义的角度来看,这是残酷的,这些项目都是一个列表的成员。

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

更新

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

dao*_*oad 2

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

\n\n

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

\n\n

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

\n\n

尼特尔断言:

\n\n
\n

不,不存在\xe2\x80\x99t,因为 a<dt>可以\n 有多个<dd>s,反之亦然。

\n
\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

对于给定的 DL 元素:

\n\n
    \n
  • 指定要包含的集合类型dtdd称为 a 的元素dt_dd_group
  • \n
  • 启动一个dt_dd_group名为 s的集合all_groups
  • \n
  • 检查每个子元素(非递归):\n\n
      \n
    • 如果元素是 dt:\n\n
        \n
      • 如果这是第一个元素或前一个元素不是dt:\n\n
          \n
        • 创建一个新的dt_dd_group
        • \n
        • 将新dt_dd_group内容附加到all_groups
        • \n
        • 将元素附加到dt_dd_group
        • \n
      • \n
      • 否则将该元素附加到当前元素dt_dd_group
      • \n
    • \n
    • 否则,如果该元素是 dd:\n\n
        \n
      • 如果这是第一个元素:\n\n
          \n
        • 创建一个新的dt_dd_group
        • \n
        • 将新dt_dd_group内容附加到all_groups
        • \n
        • 将元素附加到dt_dd_group
        • \n
      • \n
      • 将元素追加到当前元素dt_dd_group
      • \n
    • \n
  • \n
  • 返回集合all_groups
  • \n
\n\n

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

\n\n
<dl><dd>foo</dd><dd>bar</dd><dl>\n
Run Code Online (Sandbox Code Playgroud)\n\n

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

\n\n

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

\n\n

因此,总而言之,虽然理论上可以对一组语义相关的 dt 和 dd 标签进行操作的选择器,但尚未实现这样的选择器

\n