CSS 第一个 child 的选择器，如果存在多个

Question

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

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

我怎样才能 select 只有第一个 dt？含卡路里的那种？

Answer 1

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

由于 dl 不是评论中描述的第一个 child，您需要一个不同的选择器：

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

或者 — 只需给 dt 一个 class。

Answer 2

你可以这样试试

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

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

CSS 第一个 child 的选择器，如果存在多个

CSS selector of first child, if multiple exist

css

computer-science