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>

http://docs.php.net/class.limititerator

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

Answer 1

:first-of-type指的是类型，因为a是li的孩子，你可以看到没有 a中有更多li个元素作为兄弟姐妹，因此会在first-of-type

中选择a个li

看一下这个代码片段，其中2个a是li的孩子，它只会选择第一个a：

段

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您只希望定位第3项，则可以在li上使用nth-of-type，如下所示：

段

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;