CSS伪类：匹配元素之 *-child
本帖最后由 马黑黑 于 2022-10-26 21:42 编辑CSS一个重要的伪类是 *-child，例如：nth-child()、fisrt-child、last-child。文本以提问的方式展开讨论。
试着思考一下：以下的 <p>段落一</p> 是不是前景色为红色——
<style>
p:nth-child(1) {
color: red;
}
</style>
<div>
<h3>标题</h3>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
</div>
上面的CSS里面，p:nth-chlid(1) { color: red;} 表示任意一个父元素之内（如上例的div就是父元素），若匹配标签为 p 且放在第 1 位的，则令前景色为 red（红色）。显然，<p>段落一</p>符合标签条件，是 p 标签，但不符合放在第一位的条件，所以，上例，CSS的 p:nth-child(1) 设定并不能令 <p>段落一</p>的文本颜色为红色。
请再思考下一个问题：如果CSS改为，p:nth-child(2) { color: red; } ，那么，谁的文本色是红色？
答案是：<p>段落一</p> 。条件一，p 标签，符合；条件二，放在第二位，符合。
*-child 在考虑位置时，与 *-of-type 不同，*-child 兼顾父元素之下的所有的子元素，不论是什么类型的标签，因此，*-child 是和他人一同排排坐并且和他人比较位置的；*-of-type 虽然也和他人排排坐，但只和相同类型即 * 所指派的标签的位置进行比较，其他标签的位置不管。
再思考如下问题：如果我们在CSS里加入像下面的代码——
p:last-child { color:blue; }
那么，前面的 HTML 代码中，<p>段落四</p> 的文本色是不是蓝色的？
答案是：是。p:last-child 是叫 p 的最后一个儿子，<p>段落四</p> 在前面的 HTML 代码里位置放在最后，两个条件均符合。
为了区别 *-child 和 *-of-type，再给一个题目。先看如下HTML代码：
<p>
<span>文字1</span>
<span>文字2</span>
<span>文字3</span>
<span>文字4</span>
文字5
</p>
我们的问题是：如果需要设置 文字4 为红色，下面的伪类设定应该使用哪一个？
span:last-of-type { color: red; }
span:last-child { color: red; }
span:last-child { color: red; }应该这个吧
-child 兼顾父元素之下的所有的子元素，不论是什么类型的标签，因此，*-child 是和他人一同排排坐并且和他人比较位置的； 小辣椒 发表于 2022-10-26 22:01
span:last-child { color: red; }应该这个吧
-child 兼顾父元素之下的所有的子元素，不论是什么类型的 ...
你要亲自尝试一下并且根据尝试结果做分析 围观天书{:4_203:} 樵歌 发表于 2022-10-27 07:35
围观天书
天书可以读一辈子{:4_170:} 马黑黑 发表于 2022-10-27 07:51
天书可以读一辈子
两辈子也休想读懂{:4_203:} 樵歌 发表于 2022-10-27 08:06
两辈子也休想读懂
关键在于读。读书人读不懂书本是再正常不过的事情，怕啥 应该是两个都可以的吧{:4_173:} 红影 发表于 2022-10-27 12:19
应该是两个都可以的吧
不可以，只有一个可以 马黑黑 发表于 2022-10-27 08:09
关键在于读。读书人读不懂书本是再正常不过的事情，怕啥
俺是越读书越厚{:4_189:} 樵歌 发表于 2022-10-27 17:25
俺是越读书越厚
厚度法是大家所谓，小家干不了 马黑黑 发表于 2022-10-27 12:52
不可以，只有一个可以
哦哦，标签种类不同吧？ 红影 发表于 2022-10-27 22:08
哦哦，标签种类不同吧？
看规则 马黑黑 发表于 2022-10-27 18:03
厚度法是大家所谓，小家干不了
是小家碧玉吗{:4_173:} 樵歌 发表于 2022-10-28 16:46
是小家碧玉吗
据说是大家 马黑黑 发表于 2022-10-28 19:03
据说是大家
反正与俺无关。{:4_189:} 樵歌 发表于 2022-10-29 11:08
反正与俺无关。
那不可能
页:
[1]