我不能告诉之间的区别element:first-child和element:first-of-type
比如说,你有一个div
div:first-child
→所有<div>元素都是其父母的第一个孩子.
div:first-of-type
→所有<div>元素都是<div>其父元素的第一个元素.
这似乎完全相同,但它们的工作方式不同.
有人可以解释一下吗？
有没有办法选择匹配(或不匹配)任意选择器的每个第n个孩子？例如,我想选择每个奇数表行,但是在行的子集中:
table.myClass tr.row:nth-child(odd) {
...
}
<table class="myClass">
<tr>
<td>Row
<tr class="row"> <!-- I want this -->
<td>Row
<tr class="row">
<td>Row
<tr class="row"> <!-- And this -->
<td>Row
</table>
但:nth-child()似乎只计算所有tr元素,无论它们是否属于"行"类,所以我最终得到一个偶数 "行"元素而不是我正在寻找的两个元素.同样的事情发生在:nth-of-type().
有人可以解释原因吗？
如何指定:first-of-type整个文档？
我想要设置<p>HTML 的第一个样式,不管它位于何处(我不想写,section p:first-of-type因为它可能位于不同HTML文档的其他位置).
p {
background:red;
}
p:first-of-type {
background:pink;
}
p:last-of-type {
background:yellow;
}<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>我有一张桌子
<table>
<tr><td>test data 1</td></tr>
<tr><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>
要隐藏第二行表,我正在使用以下css
table tr:nth-child(2) {display : none;}
但不适用于所有浏览器.请帮我.提前致谢.