Question

我把它作为我的一张桌子的一部分。

<header>
  <h1>...</h1>
  <p>...</p>
  <p>...</p>
  <h2>...</h2>
  <dl>
    <dt>...</dt>
    <dd>...</dd>
  </dl>
  <dl>
    <dt>...</dt>
    <dd>...</dd>
  </dl>
</header>

如何选择第一个dt？那卡路里含有卡路里的那个？

Answer 1

dl:first-child dt {
    // ...
}

由于dl 不是第一个孩子，如评论中所述，您需要一个不同的选择器：

dl:first-of-type dt {
    // ...
}

或 - 只需给dt一个班级。

Answer 2

您可以尝试这样

dl > dt:first-child{
    background-color:red;
}

使用<dt>元素下的每个第一个background-color元素<dl>都会变为红色。

第一个子节点的CSS选择器，如果存在多个

2 个答案: