Appearance
nth-of-type 与 nth-child 的区别?
nth-child 和 nth-of-type 都是 CSS 伪类选择器。
- nth-child 选择元素时主要考虑元素的位置 (位置匹配在考虑类型)。
- nth-of-type 选择元素时主要考虑元素的类型 (类型过滤后在考虑位置)。
html
<style>
/* 不管标签名称，只要奇数行是div即可*/
div:nth-child(2n + 1) {
color: red;
}
/* 先过滤标签名称，在选择基数 */
div:nth-of-type(2n + 1) {
color: red;
}
</style>
<body>
<div>我</div>
<span>很</span>
<div>帅</div>
<div>对</div>
<span>不</span>
<div>?</div>
</body><style>
/* 不管标签名称，只要奇数行是div即可*/
div:nth-child(2n + 1) {
color: red;
}
/* 先过滤标签名称，在选择基数 */
div:nth-of-type(2n + 1) {
color: red;
}
</style>
<body>
<div>我</div>
<span>很</span>
<div>帅</div>
<div>对</div>
<span>不</span>
<div>?</div>
</body>