手记

【金秋打卡】第4天 CSS3中的选择器(一)

课程名称:十天精通CSS3

课程章节: 征服CSS3选择器(上)

主讲老师:大漠

课程内容:

今天学习的内容包括: css3新的3个属性分别是?伪类选择器root的使用?伪类选择器not的使用?伪类选择器empty的使用?伪类选择器target的使用?伪类选择器first-child的使用?last-child的使用?nth-child的使用?nth-last-child(n)的使用?

课程收获:

CSS3CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念。新增属性含义如下:

分别根据3种选择器实现了3种不同的效果

:root选择器表示根选择器,意思表示匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>“:root”选择器等同于<html>元素。

:not选择器也称为否定选择器,和我们在jQuery中使用的:not选择器一模一样,可以选择除某个元素之外的所有元素。

:empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,也包括空格在内。

:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。

:first-child选择器表示的是选择父元素的第一个子元素的元素。我们需要注意的是第一个元素是子元素而不是后代元素。

:last-child选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

:nth-last-child(n)选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”。从某父元素的最后一个子元素开始计算,来选择特定的元素。

今天学习了边框的6-1到6-9的9个小结,花费了60分钟,今天学习了选择根元素来设置整个背景的颜色,如果我们想要取反向的元素,我们可以使用not选择器。如果我们想要取第一个元素可以使用first-child。我们还可以使用last-child来给最后一个元素设置我们需要的颜色或者背景。除此之外,我们还可以指定选择哪一个元素,使用n这个变量。nth-last-child可以让我们从后面往前面数,我们需要设置的元素。

1人推荐
随时随地看视频
慕课网APP