html - :first-child pseudo is not applying

Question

我想对 <dl> 的第一个 child 应用一些样式.我的意思是说应该先应用于 <dd> .但如果我删除 <dt></dt> 它会起作用在<dl> .

<dl>
    <dt>Test</dt>
    <dd>One</dd>
    <dd>Two</dd>
    <dd>Three</dd>
    <dd>Four</dd>
    <dd>Five</dd>
</dl>

CSS:

dl dd:first-child{border:1px solid red}

Answer 1

使用 first-of-type相反:

dl dd:first-of-type{border:1px solid red}

Demo Fiddle

---

推理...

first-of-type

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

-对比-

first-child

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

在你的例子中，first-child不会工作，因为第一个 dd不是 dl 的第一个 child