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

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

由于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元素组进行操作?

更新

我正在寻找/提议的是类似于伪元素列表项,其中dl:list-item将选择dt和所有关联的dd元素作为一个项,与第一行伪元素的方式非常相似允许人们选择一组字符作为一个单元.

最佳答案
不,不是因为< dt>可以有多个< dd> s,反之亦然.

但也许:

dt + dd {  }

在你的情况下足够了

转载注明原文:是否有一个CSS选择器可以选择一个dt及其相关的dd元素? - 代码日志