《CSS选择器与相关特性》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章CSS选择器与相关特性本章简介：通过上一章的学习，了解了在网页设计中引入CSS的意义。引入CSS的核心目的就是实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。本章介绍CSS是如何工作的。重点介绍CSS的“选择器”这一核心概念，以及相关的两个特性——“继承”和“层叠”。构造CSS规则2.1基本CSS选择器2.2在HTML中使用CSS的方法2.3复合选择器2.4CSS的继承特性2.5CSS的层叠特性2.62.1构造CSS规则CSS的作用就是设置网页的各个组成部分的表

2、现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：2级标题{h2{字体:宋体;font-family:宋体;大小:15像素;font-size:15px;颜色:红色;color:red;装饰:下划线text-decoration:underline;}}2.2基本CSS选择器基本选择器有标记选择器、类别选择器、ID选择器、属性选择器、结构伪类选择器和UI伪类选择器6种。2.2.1标记选择器一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。因此，每一种HT

3、ML标记的名称都可以作为相应的标记选择器的名称。例如，p选择器就是用于声明页面中所有

标记的样式风格。同样，可以通过h1选择器来声明页面中所有的

标记的CSS风格。CSS标记选择器2.2.2类别选择器在上一小节中提到的标记选择器一旦声明，那么页面中所有的相应标记都会相应地产生变化。例如，当声明了

标记为红色时，页面中所有的

标记都将显示为红色。如果希望其中的某一个

标记不是红色，而是绿色，这时仅依靠标记选择器是不够的，还需要引入类别（class）选择器。类别选择器2.2.3ID选择器ID选择器的使用方法跟c

4、lass选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。ID选择器2.2.4属性选择器在HTML中，通过各种各样的属性，可以给元素增加很多附加信息。例如，通过font-family属性，可以指定文字的字体，通过id属性，可以将不同的div元素进行区分，并且通过JavaScript来控制这个div元素的内容和状态。CSS3.0新增加了3个属性选择器。这3个属性选择器与CSS2.1中已经定义的4个属性选择器共同构成了CSS

5、的功能强大的标签属性过滤体系。选择器说明E[att^=＂val＂]选择匹配E的元素，且该元素定义了att属性，att属性值包含前缀为＂val＂的子字符串。注意，E选择符可以省略，表示可匹配任意类型的元素例如：body[lang^=＂en＂]匹配，而不匹配E[foo$=＂val＂]选择匹配E的元素，且该元素定义了att属性，att属性值包含后缀为＂val＂的子字符串。注意，E选择符可以省略，表示可匹配任意类型的元素例如：img[s

6、rc$=＂jpg＂]匹配，而不匹配E[foo*=＂val＂]选择匹配E的元素，且该元素定义了att属性，att属性值包含＂val＂的子字符串。注意，E选择符可以省略，表示可匹配任意类型的元素例如：img[src$=＂jpg＂]匹配，而不匹配2.2.5结构伪类选择器结构伪类选择器也是CSS3新增的选择器之一。结构伪类是利用文档结构树实现元素过滤，也就是说，通过文档结构的相互关系来匹

7、配特定的元素，从而减少文档内对class属性和ID属性的定义，使文档更加简洁。选择器说明E:root选择匹配E所在文档的根元素。注意，在(X)HTML文档中，根元素就是html元素，此时该选择器与html选择器匹配的内容相同E:nth-child(n)选择所有在其父元素中的第n个位置的匹配E的子元素提示：参数n可以是数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3），参数的索引起始值为1，而不是0例如：tr:nth-child(3)匹配所有表格里排第3行的tr元素tr:nth-child(2n+1)匹配所有表

8、格的奇数行tr:nth-child(2n)匹配所有表格的偶数行tr:nth-child(odd)匹配所有表格的奇数行tr:nth-child(even)匹配所有表格的偶数行E:nth-last-child(n)选择所有在其父元素中倒数第n个位置的匹配E的子元素提