代码
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 被选中?它不是同类中的第一个 sibling ,而是最后一个。
最佳答案
:first-of-type
指的是 type 因为 a
是 li
的 child 如您所见,没有更多a
li
中的兄弟元素所以它将选择每个 first-of-type
的 a
在 li
内
看看这个带有 li 和 2 a
的片段是 li
的 child 它只会选择第一个 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-type
在 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>
关于html - 为什么 ul 列表中的 First-of-type 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35713922/