手记

【九月打卡】第10天 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人推荐
随时随地看视频
慕课网APP