CSS：第一选择器

Question

我有一个<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>

Answer 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会更容易dl+dt, dt+dt+dd作为选择器）