|
|
本帖最后由 马黑黑 于 2023-8-29 23:16 编辑
其实，很多人都不太能搞懂 nth-child 的。nth-child 是基于节点的，比方讲，下面的三个 span ：
<div id="mydiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
这样的 CSS 是可以定义 <span>2</span> 的文本颜色的：
#mydiv > span:nth-child(2) {
color: red;
}
但是，如果出现其他标签在这三个 span 之间，例如：
<div id="mydiv">
<span>1</span>
<h3>标题</h3>
<span>2</span>
<span>3</span>
</div>
上面的 CSS 中 nth-child(2) 就会失效，因为 nth-child 基于节点，现在，#mydiv 的第二个节点是 h3 而不是
span ，h3的文本不是红色， <span>2</span> 的文本也不是（它现在是第三个节点）。
而 nth-of-type 是基于兄弟元素的，大家都是 span 的话，就是兄弟，h3 不是兄弟，所以下面对 span 的文本颜色的定义，总是有效的，第二个 span 的文本是红色：
#div > span:nth-of-type(2) {
color: red;
}
一个基于节点，另一个基于兄弟元素，这就是 nth-child 和 nth-of-type 的区别。从 type 也可以看出，它是类型的意思，就是指同一种标签。
当然，当需要这么定义标签属性时，好的习惯是，给标签定义 class 选择器，通过class来设定它们。 |
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
楼主
显身卡
发表于 2023-8-29 21:51
