课程名称:十天精通CSS3
课程章节: 征服CSS3选择器(上)
主讲老师:大漠
课程内容:
今天学习的内容包括: css3
新的3个属性分别是?伪类选择器root
的使用?伪类选择器not
的使用?伪类选择器empty
的使用?伪类选择器target
的使用?伪类选择器first-child
的使用?last-child
的使用?nth-child
的使用?nth-last-child(n)
的使用?
课程收获:
CSS3
在CSS2
的基础上对属性选择器进行了扩展,新增了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
可以让我们从后面往前面数,我们需要设置的元素。