CSS：第一个选择器答案

【问题标题】：CSS: First SelectorCSS：第一个选择器
【发布时间】：2013-04-23 18:19:04
【问题描述】：

我有一个<DL> 元素，其中包含<DT> 和<DD> 组

我现在看起来像这样：

AAAAA   111111
        222222
        333333
BBBBB   111111
        222222
        333333

我试图在<DT> 之间放置空格，所以它看起来像这样：

AAAAA   111111
        222222
        333333

BBBBB   111111
        222222
        333333

如何让 CSS 在 DT 元素之间应用空格，同时保持整体间距？

这是我目前的 CSS：

dl { padding: 25px 0px 25px 0px; }

dt {
    clear: left;
    float: left;
    text-align: left;
    width: 90px;
}

dd {
    margin: 0 0 0 90px;
    padding: 0 0 0 0;
}

HTML 是：

<dl>
<dt>AAAAAAA</dt>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>    

<dt>BBBBBBBB</dt>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>    
</dl>

【问题讨论】：

您能否详细说明，“在 DT 元素之间应用空格，同时保持所有间距？”我不确定我明白你的意思。
我希望在 [dt] 元素之间添加一个空格，而不是任何其他元素。就像示例一样，AAAAA 和 BBBBB 之间的视觉空间很好
我添加了示例 html

标签： c# asp.net css asp.net-mvc css-selectors

【解决方案1】：

您需要在dt 元素以及紧跟在dt 之后的dd 元素中添加填充或边距。

使用您现有的代码，只需添加以下内容：

dt, dt+dd {
    margin-top:15px;
}

如果您不希望第一个具有填充，则使用 first-of-type 选择器覆盖第一个。再次添加以下内容：

dt:first-of-type, dt+dd:first-of-type {
    margin-top:0px;
}

此处的 jsFiddle 示例：http://jsfiddle.net/C2FRn/

（请注意，first-of-type 不适用于 IE8 或更早版本；有一些技巧可以解决它，但如果您需要 IE8 支持，您可能会发现只需向第一个 dt 添加一个类会更容易，或使用dl+dt, dt+dt+dd 作为选择器）

【讨论】：

...或者您可以使用dt+dd, dd+dt 作为您的规则的选择器 - 这样第一个 dt 将不匹配它。所以不需要first-of-type
@o.v. - 是的，有几种方法可以给这只猫剥皮。在不需要 IE8 支持的情况下，我宁愿坚持使用first-of-type，因为它是语义的——如果我在一年后回到代码中，我将有机会了解我一直在尝试的内容去做。 dt+dd, dd+dt 解决方案很简洁，但需要 cmets 才能让阅读它的人理解它的目的是什么。