CSS:ul列表中的第一个类型不起作用

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>

结果小提琴

为什么a选择项目12？它不是同类型的第一个兄弟,它是最后一个.

Answer 1

:first-of-type指型,是因为a是孩子li ,正如你可以看到有没有更多的a元素中的那些兄弟姐妹li,因此将选择每一个first-of-type的a内li

看看这个片段与一个2 a岁的孩子,li它将只选择第一个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,你可以使用nth-of-typeon li,如下所示:

片段

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>