CSS伪类：匹配元素之 *-child

马黑黑 · 发表于 2022-10-26 21:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-10-26 21:42 编辑

CSS一个重要的伪类是 *-child，例如：nth-child()、fisrt-child、last-child。文本以提问的方式展开讨论。

试着思考一下：以下的 段落一 是不是前景色为红色——

<style>
p:nth-child(1) {
 color: red;
}
</style>

<div>
 <h3>标题</h3>
 段落一
 段落二
 段落三
 段落四
</div>

上面的CSS里面，p:nth-chlid(1) { color: red;} 表示任意一个父元素之内（如上例的div就是父元素），若匹配标签为 p 且放在第 1 位的，则令前景色为 red（红色）。显然，段落一 符合标签条件，是 p 标签，但不符合放在第一位的条件，所以，上例，CSS的 p:nth-child(1) 设定并不能令 段落一 的文本颜色为红色。

请再思考下一个问题：如果CSS改为，p:nth-child(2) { color: red; } ，那么，谁的文本色是红色？

答案是：段落一 。条件一，p 标签，符合；条件二，放在第二位，符合。

*-child 在考虑位置时，与 *-of-type 不同，*-child 兼顾父元素之下的所有的子元素，不论是什么类型的标签，因此，*-child 是和他人一同排排坐并且和他人比较位置的；*-of-type 虽然也和他人排排坐，但只和相同类型即 * 所指派的标签的位置进行比较，其他标签的位置不管。

再思考如下问题：如果我们在CSS里加入像下面的代码——

p:last-child { color:blue; }

那么，前面的 HTML 代码中，段落四 的文本色是不是蓝色的？

答案是：是。p:last-child 是叫 p 的最后一个儿子，段落四 在前面的 HTML 代码里位置放在最后，两个条件均符合。

为了区别 *-child 和 *-of-type，再给一个题目。先看如下HTML代码：


 文字1
 文字2
 文字3
 文字4
 文字5


我们的问题是：如果需要设置文字4 为红色，下面的伪类设定应该使用哪一个？

span:last-of-type { color: red; }
span:last-child { color: red; }