为什么 ul 列表中的 First-of-type 不起作用

Question

代码

ul a:first-of-type {
  color: red;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li><a href="#">Item 3</a>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li><a href="#">Item 12</a>
  </li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

Result Fiddle

为什么选择 a 项目 12？它不是同类中的第一个兄弟，而是最后一个。

Answer 1

:first-of-type 指的是 type 所以因为 a 是 li 的 child 正如你在那里看到的没有更多a元素作为那些li中的兄弟姐妹所以它将select每个first-of-type中的a li

看看这个带有 li 的片段，其中 2 a 是 li 的 child 它会 select 只有第一个 a:

片段

ul a:first-of-type {
  color: red;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li><a href="#">Item 3a</a>
    <a href="#">Item 3b</a>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li><a href="#">Item 12</a>
  </li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

如果您只想定位 项目 3，您可以在 li 上使用 nth-of-type，像这样：

片段

ul li:nth-of-type(3) a {
  color: red;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li><a href="#">Item 3</a>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li><a href="#">Item 12</a>
  </li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

为什么 ul 列表中的 First-of-type 不起作用

Why First-of-type in ul list is not working

html

css

css-selectors

pseudo-class

html-lists

代码

片段

片段