为啥 ul 列表中的第一个类型不起作用

Posted 2023-03-06

【中文标题】为啥 ul 列表中的第一个类型不起作用

【英文标题】：Why First-of-type in ul list is not working为什么 ul 列表中的第一个类型不起作用

【发布时间】：2016-06-13 08:10:10

【问题描述】：

代码

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？它不是同类型的第一个兄弟，而是最后一个。

【问题讨论】：

:first-of-type 指的是a，这是他的parent-li 中的第一个类型，因此匹配a

"...表示其父元素的子元素列表中其类型的第一个兄弟元素。"，它不会跨父元素选择第一个元素

【参考方案1】：

:first-of-type 指的是 type 所以因为 a 是 li 的子元素，并且您可以看到 no 更多 a 元素为li 中的兄弟姐妹，因此它将选择 a 中的 first-of-type 中的每一个 li

看看这个带有 li 的 sn-p，其中 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 项，您可以在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>

【讨论】：

感谢您清理它。我考虑的是孩子而不是兄弟姐妹。现在说得通了。