Question

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

由于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伪元素大致相同，允许人们选择一组字符作为一个单元。

Answer 1

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

但也许：

dt + dd {  }

就足够了

Answer 2

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

克尼特说，我所寻找的是不可能的。我怀疑是这种情况，但在阅读各种标准时我可能会错过一些东西。

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

knittl断言：

不，没有，因为<dt>可以有多个<dd> s和另一种方式轮。

如果他已经停止了'不，那就没有'那将是正确答案。

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

可以通过提供算法来直接反驳该声明，该算法为作为dl的子节点的任何dt和dd元素集生成一组相关元素。此外，可以通过在文档的不确定部分上操作的现有伪元素的反例来反驳它。

实现对相关dt和dd元素进行分组的伪元素的逻辑并不困难。因此，任何一种元素的数量都不是密切相关的。

对于给定的DL元素：

指定要包含dt和dd元素的集合类型，称为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标签进行操作，但没有实现这样的选择器。

Answer 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/

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

3 个答案: