章节
问答
课签
笔记
评论
占位
占位

这么快就当爷爷了? - 后代选择器

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:

.first  span{color:red;}

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

任务

我来试一试:修改一下代码

1、把右边代码编辑器中第12行代码修改一下:

.food>li修改为.food li看一下效果。

想一想为什么会是这样的效果?

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 慕标6096510
类属性

最新回答 / weixin_慕妹7548329
因为上面只定义了color:red下面定义了boeder:1px solid red(红色实线边框)

最赞回答 / weixin_精慕门7091075
比如<p>标签和<p>标签包含的<span>标签。那么通用的作用于<p>标签及<p>标签包含的所有标签,而后代选择器作用于所有<p>标签包含的标签 ,除了<p>标签本身。

最新回答 / 七分37开
<...图片...>在这里

最赞回答 / 木城武
这里的例子是为了说明,后代选择器(空格)对嵌套标签也是有效的,而子选择器(>)只对第一代后代有效,改变第八行代码的.first span 和.first>span 就能看出区别了

最赞回答 / 超级爱学习的乔乔
你仔细看看,水果和蔬菜都是第一个<li>那一级的,虽然香蕉苹果梨也有<li>,但是是在<ul>下面嵌套的一级

最新回答 / x偏爱_南半球o
<ol style="border:1px solid red"></ol>这样就有边框了

最新回答 / x偏爱_南半球o
一个就够 你敲多少个都是只起一个的作用

已采纳回答 / 周怿林
这里隐含了一个“多级列表”的概念,是浏览器解析时用的默认样式。我们在前端开发过程中一般可以不用管,直接写我们想要的列表样式就好。

最赞回答 / 酒徒萧索
加上逗号后ul和li变成同级元素,不加逗号是表示ul和li是父级和子级 的关系

最新回答 / qq_zzh_xzsytoer
这里相当于两个列表,水果、蔬菜作为外层的列表,这是外层的ul,每个列表项比如水果又包含一个列表,这是里面的ul

最赞回答 / 长江大学地产21701钟康
.food>li表示类food后第一子代li加一个轮廓和颜色(这里多个li标签是并列的,所以水果和蔬菜都变红),宽。而修改为.food li后表示类food后的所有子代(也就是包含的所有标签)全部设置轮廓和颜色。

已采纳回答 / 南波湾二
两者是有区别对,>表示后者是前者的第一代,空格表示后者都是前者的子代
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言