选择器css选择器

单元二CSS选择器掌握CSS基础选择器,能够运用CSS选择器定义标记样式.
理解关系选择器的用法,能够准确判断元素与元素间的关系.
掌握常用的结构化伪类选择器,能够为相同名称的元素定义不同样式.
掌握伪元素选择器的使用,能够在页面中插入所需要的文字或图片内容.
掌握CSS伪类,会使用CSS伪类实现超链接特效.
教学目标任务1:基础选择器了解选择器的概念掌握CSS基础选择器的使用方法区分基础选择器(1)标记选择器标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式.
其基本语法格式如下:例如:上述CSS样式代码用于设置HTML页面中所有的段落文本——字体大小为12像素、颜色为#666、字体为"微软雅黑".
标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}p{font-size:12px;color:#666;font-family:"微软雅黑";}CSS基础选择器(2)类选择器类选择器使用".
"(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性.
类选择器最大的优势是可以为元素对象定义单独或相同的样式.
.
类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器(3)id选择器id选择器使用"#"进行标识,后面紧跟id名,其基本语法格式如下:该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素.
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器(4)通配符选择器通配符选择器用"*"号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素.
其基本语法格式如下:例如:使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距.
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}*{margin:0;/*定义外边距*/padding:0;/*定义内边距*/}CSS基础选择器任务2:关系选择器了解兄弟选择器区分临近兄弟选择器和普通兄弟选择器掌握兄弟选择器的使用方法(1)标签指定式选择器标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格.
例如:h3.
special或p#one.
其他选择器(2)并集选择器并集选择器是各个选择器通过逗号(,)连接而成的,任何形式的选择器(包括标记选择器、class类选择器、id选择器等),都可以作为并集选择器的一部分.
如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为他们定义相同的CSS样式.
(3)后代选择器后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔.
当标记发生嵌套时,内层标记就成为外层标记的后代.
其他选择器(4)子代选择器子代选择器主要用来选择某个元素的第一级子元素.
例如希望选择只作为h1元素子元素的strong元素,可以这样写:h1>strong.
兄弟选择器用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素.
兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种.
(1)临近兄弟选择器该选择器使用加号"+"来链接前后两个选择器.
选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素.
(5)兄弟选择器(+、~)其他选择器(2)普通兄弟选择器普通兄弟选择器使用"~"来链接前后两个选择器.
选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素.
任务3:伪类选择器了解伪类选择器掌握伪类选择器的使用方法:root选择器用于匹配文档根元素,在HTML中,根元素始终是html元素.
也就是说使用":root选择器"定义的样式,对所有页面元素都生效.
对于不需要该样式的元素,可以单独设置样式进行覆盖.
1、:root选择器伪类选择器如果对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用:not选择器.
2、:not选择器:only-child选择器用于匹配属于某父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则使用":only-child选择器"可以选择这个子元素.
3、:only-child选择器伪类选择器:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式.
4、:first-child和:last-child选择器使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素,但是如果用户想要选择第2个或倒数第2个子元素,这两个选择器就不起作用了.
为此,CSS3引入了:nth-child(n)和:nth-last-child(n)选择器,它们是:first-child选择器和:last-child选择器的扩展.
5、:nth-child(n)和:nth-last-child(n)选择器在上一节介绍了:nth-child(n)和:nth-last-child(n)选择器,并实现了一些简单的页面效果,本节将引入:nth-of-type(n)和:nth-last-of-type(n)选择器,这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素,而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素,与元素类型无关.
6、:nth-of-type(n)和:nth-last-of-type(n)选择器伪类选择器:empty选择器用来选择没有子元素或文本内容为空的所有元素.
7、:empty选择器:target选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式.
只有用户单击了页面中的超链接,并且跳转到target元素后,:target选择器所设置的样式才会起作用.
8、:target选择器伪类选择器:before伪元素选择器用于在被选元素的内容前面插入内容,必须配合content属性来指定要插入的具体内容.
其基本语法格式如下:在上述语法中,被选元素位于":before"之前,"{}"中的content属性用来指定要插入的具体内容,该内容既可以为文本也可以为图片.
1、:before选择器:before{content:文字/url();}伪元素选择器:after伪元素选择器用于在某个元素之后插入一些内容,使用方法与:before选择器相同.
2、:after选择器伪元素选择器在CSS中,通过链接伪类可以实现不同的链接状态.
所谓伪类并不是真正意义上的类,他的名称是由系统定义的,通常由标记名、类名或id名加":"构成.
超链接标记的伪类有4种,具体如下表所示.
超链接标记的伪类含义a:link{CSS样式规则;}未访问时超链接的状态a:visited{CSS样式规则;}访问后超链接的状态a:hover{CSS样式规则;}鼠标经过、悬停时超链接的状态a:active{CSS样式规则;}鼠标点击不动时超链接的状态链接伪类选择器本章小结本章从CSS3新增的选择器开始介绍,依次介绍了属性选择器、关系选择器、结构化伪类选择器、伪元素选择器等选择器的使用方法.
最后利用本周知识点实现了一个网页设计软件列表页面的阶段案例.
选择器是CSS3中很重要的组成部分,它实现了页面内对样式的各种需求,本章仅仅演示了这些选择器比较常用的功能和使用方法,读者可深入研究学习其他高级功能.