|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 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; }
|
评分
-
| 参与人数 3 | 威望 +150 |
金钱 +300 |
经验 +150 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
小辣椒
| + 50 |
+ 100 |
+ 50 |
很给力! |
查看全部评分
|