为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第10天 CSS3选择器(二)

标签:
CSS3

课程名称:初识HTML(5)+CSS(3)-升级版

课程章节: CSS3选择器

主讲老师:五月的夏天

课程内容:

今天学习的内容包括: 什么是子选择器? 什么是后代选择器?什么是通用选择器?什么是伪类选择器?什么是分组选择器?

课程收获:

子选择器就是大于符号(>),用于选择指定标签元素的第一代子元素。
图片描述

后代选择器包含选择器,就是加入空格,用于选择指定标签元素下的后辈元素。我们需要注意的是这个选择器与子选择器的区别,子选择器仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。总的来说,就是>作用于元素的第一代后代,空格作用于元素的所有后代。
图片描述

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素。我们可以将下面代码使用html中任意标签元素字体颜色全部设置为红色。
图片描述

伪类选择符可以兼容所有浏览器的“伪类选择符”就是a标签上使用:hover了(其实伪类选择符还有很多,尤其是 css3中,但是很多不能兼容所有浏览器)。其实 :hover 可以放在任意的标签上,比如说p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover的组合。
图片描述

我们想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)。我们可以把下面第一段全部文字颜色设置为绿色同时把第二段文字中的“简单”文字颜色设置为绿色。
图片描述

今天学习了CSS3选择器,为网页添加样式中8-6到8-10的5个小结,花费了37分钟,我们学习了很多种类的选择器,我们在网站中鼠标放在元素上,使得元素变色,字体变大就是伪类选择器的效果。我们多个元素都有相同的样式,我们就可以使用分组选择器来省去多余的代码。如果我们想要访问父元素下面的子元素,除了直接访问,我们还可以使用后代选择器,这些选择器在工作中几乎都在用,学会了可以提高工作效率。

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消