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元素添加填充或边距,以及dd在a之后立即添加元素dt.

使用现有代码,只需添加以下内容:

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-typeIE8或更早版本不可用;有一些黑客可以解决它,但是如果你需要IE8支持,你可能会发现简单地将一个类添加到第一个类dt,或者dl+dt, dt+dt+dd用作选择器)