第2章CSS选择器与相关特性

1、 第第2 2章章 CSSCSS选择器与相关特性选择器与相关特性 本章简介：本章简介： 通过上一章的学习，了解了在网页设计中通过上一章的学习，了解了在网页设计中引入引入CSSCSS的意义。引入的意义。引入CSSCSS的核心目的就的核心目的就是实现网页结构内容和表现形式的分离，是实现网页结构内容和表现形式的分离，将原来由将原来由HTMLHTML语言所承担的一些与结构语言所承担的一些与结构无关的功能剥离出来，改由无关的功能剥离出来，改由CSSCSS来完成。来完成。本章介绍本章介绍CSSCSS是如何工作的。重点介绍是如何工作的。重点介绍CSSCSS的的“选择器选择器”这一核心概念，以及相关这一核心概念

2、，以及相关的两个特性的两个特性“继承继承”和和“层叠层叠”。 构造构造CSS规则规则2.1基本基本CSS选择器选择器2.2在在HTML中使用中使用CSS的方法的方法2.3 复合选择器复合选择器2.4CSS的继承特性的继承特性2.5CSS的层叠特性的层叠特性2.62.1构造CSS规则CSSCSS的作用就是设置网页的各个组成部分的表现形式。因此，的作用就是设置网页的各个组成部分的表现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：该大致如下：2 2级标题级标题 h2 h2 字体字体: :宋体宋体; ; fo

3、nt-family: 宋体; 大小大小:15:15像素像素; ; font-size:15px; 颜色颜色: :红色红色; ; color: red; 装饰装饰: :下划线下划线 text-decoration: underline; 2.2基本CSS选择器基本选择器有标记选择器、类别选择器、基本选择器有标记选择器、类别选择器、IDID选择器、属性选选择器、属性选择器、结构伪类选择器和择器、结构伪类选择器和UIUI伪类选择器伪类选择器6 6种。种。2.2.1标记选择器一个一个HTMLHTML页面由很多不同的标记组成，而页面由很多不同的标记组成，而CSSCSS标记选择器就是声标记选择器就是声明哪

4、些标记采用哪种明哪些标记采用哪种CSSCSS样式。因此，每一种样式。因此，每一种HTMLHTML标记的名称都可以标记的名称都可以作为相应的标记选择器的名称。例如，作为相应的标记选择器的名称。例如，p p选择器就是用于声明页面中选择器就是用于声明页面中所有所有标记的样式风格。同样，可以通过标记的样式风格。同样，可以通过h1h1选择器来声明页面中所选择器来声明页面中所有的有的标记的标记的CSSCSS风格。风格。 h1 color: red; font-size: 25px; 选择器 属性 值 属性 值 声明 声明 CSS标记选择器2.2.2类别选择器在上一小节中提到的标记选择器一旦声明，那么页面中

5、所有的在上一小节中提到的标记选择器一旦声明，那么页面中所有的相应标记都会相应地产生变化。例如，当声明了相应标记都会相应地产生变化。例如，当声明了标记为红色时，标记为红色时，页面中所有的页面中所有的标记都将显示为红色。如果希望其中的某一个标记都将显示为红色。如果希望其中的某一个标记不是红色，而是绿色，这时仅依靠标记选择器是不够的，还需标记不是红色，而是绿色，这时仅依靠标记选择器是不够的，还需要引入类别（要引入类别（classclass）选择器。）选择器。类别选择器 .class color: green; font-size: 20px; 类别选择器 属性 值 属性 值 声明 声明 类别名称 2

6、.2.3ID选择器IDID选择器的使用方法跟选择器的使用方法跟classclass选择器基本相同，不同之处在于选择器基本相同，不同之处在于IDID选择器只能在选择器只能在HTMLHTML页面中使用一次，因此其针对性更强。在页面中使用一次，因此其针对性更强。在HTMLHTML的的标记中只需要利用标记中只需要利用idid属性，就可以直接调用属性，就可以直接调用CSSCSS中的中的IDID选择器。选择器。ID选择器 #id color: yellow; font-size: 30px; ID选择器 属性 值 属性 值 声明 声明 2.2.4属性选择器在在HTMLHTML中，通过各种各样的属性，可以给

7、元素增加很多附加信中，通过各种各样的属性，可以给元素增加很多附加信息。例如，通过息。例如，通过font-familyfont-family属性，可以指定文字的字体，通过属性，可以指定文字的字体，通过idid属属性，可以将不同的性，可以将不同的divdiv元素进行区分，并且通过元素进行区分，并且通过JavaScriptJavaScript来控制这来控制这个个divdiv元素的内容和状态。元素的内容和状态。CSS 3.0CSS 3.0新增加了新增加了3 3个属性选择器。这个属性选择器。这3 3个属性选择器与个属性选择器与CSS 2.1CSS 2.1中已经定义的中已经定义的4 4个属性选择器共同构成

8、了个属性选择器共同构成了CSSCSS的功能强大的标签属性的功能强大的标签属性过滤体系。过滤体系。选择器说 明Eatt=val选择匹配E的元素，且该元素定义了att属性，att属性值包含前缀为val的子字符串。注意，E选择符可以省略，表示可匹配任意类型的元素例如：bodylang=en匹配 ，而不匹配Efoo$=val选择匹配E的元素，且该元素定义了att属性，att属性值包含后缀为val的子字符串。注意，E选择符可以省略，表示可匹配任意类型的元素例如：imgsrc$=jpg匹配，而不匹配Efoo*=val选择匹配E的元素，且该元素定义了att属性，att属性值包含val的子字符串。注意，E选择

9、符可以省略，表示可匹配任意类型的元素例如：imgsrc$=jpg匹配，而不匹配2.2.5结构伪类选择器结构伪类选择器也是结构伪类选择器也是CSS 3CSS 3新增的选择器之一。结构伪类是利用新增的选择器之一。结构伪类是利用文档结构树实现元素过滤，也就是说，通过文档结构的相互关系来文档结构树实现元素过滤，也就是说，通过文档结构的相互关系来匹配特定的元素，从而减少文档内对匹配特定的元素，从而减少文档内对classclass属性和属性和IDID属性的定义，使属性的定义，使文档更加简洁。文档更加简洁。选择器说 明E:root选择匹配E所在文档的根元素。注意，在 (X)HTML文档中，根元素就是html

10、元素，此时该选择器与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)匹配所有表格的奇数行 tr:nth-child(2n)匹配所有表格的偶数行 tr:nth-child(odd)匹配所有表格的奇数行 tr:nth-child(even)匹配所有表格的偶数行E:nth-last-child(n)选择所有在其父元素中倒数

11、第n个位置的匹配E的子元素提示：该选择器的计算顺序与E:nth-child(n)相反，但语法和用法相同E:nth-of-type(n)选择父元素中第n个位置，且匹配E的子元素提示：所有匹配E的子元素被分离出来单独排序。非E的子元素不参与排序。参数的取值与E:nth-child(n)相同例如：p:nth-of-type(2)匹配片段中的第2个p元素，但不匹配片段中位于第2个位置的p元素E:nth-last-of-type(n)选择父元素中倒数第n个位置，且匹配E的子元素提示：该选择器的计算顺序与E:nth-of-type(n)相反，但语法和用法相同E:last-child选择位于其父元素中最后一

12、个位置，且匹配E的子元素例如：h1:last-child匹配片段中h1元素E:first-of-type选择在其父元素中匹配E的第一个同类型的子元素提示：该选择器的功能类似于E:nth-of-type(1)例如：p:first-of-type匹配片段中的第1个p元素E:last-of-type选择在其父元素中匹配E的最后一个同类型的子元素提示：该选择器的功能类似于E:nth-last-of-type(1)例如：p:last-of-type匹配片段中的第2个p元素E:only-child选择其父元素只包含一个子元素，且该子元素匹配E例如：p:only-child匹配片段中的p元素，但不匹配 片段

13、中的p元素E:only-of-type选择其父元素只包含一个同类型的子元素，且该子元素匹配E例如：p:only-of-type匹配片段中的p元素，也匹配 片段中的p元素E:empty选择匹配E的元素，且该元素不包含子节点提示：文本也属于节点2.2.6UI伪类选择器UIUI伪类选择器也是伪类选择器也是CSS 3CSS 3新增选择器之一。选择器的共同特征是：新增选择器之一。选择器的共同特征是：指定的样式只有当元素处于某种状态时才起作用，在默认状态下不指定的样式只有当元素处于某种状态时才起作用，在默认状态下不起作用。起作用。CSS 3CSS 3共定义了共定义了1111种种UIUI元素状态伪类选择器，

14、分别是元素状态伪类选择器，分别是E:hoverE:hover、E:activeE:active、E:focusE:focus、E:enabledE:enabled、E:disabledE:disabled、E:read-onlyE:read-only、E:read-writeE:read-write、E:checkedE:checked、E:defaultE:default、E:indeterminateE:indeterminate和和E:selectionE:selection。这些元素中只有。这些元素中只有3 3种比较常用。种比较常用。选择器说 明E:enabled选择匹配E的所有可用U

15、I元素提示：在网页中，UI元素一般是指包含在form元素内的表单元素例如：input:enabled匹配片段中的文本框，但不匹配该片段中的按钮E:disabled选择匹配E的所有不可用UI元素提示：在网页中，UI元素一般是指包含在form元素的表单元素例如：input:disabled匹配片段中的按钮，但不匹配该片段中的文本框E:checked选择匹配E的所有处于选中状态的UI元素提示：在网页中，UI元素一般是指包含在form元素内的表单元素例如：input:checked匹配 片段中的单选按钮，但不匹配该片段中的复选框2.3在HTML中使用CSS的方法在对在对CSSCSS有了大致的了解之后，

16、就可以使用有了大致的了解之后，就可以使用CSSCSS对页面进行全方对页面进行全方位的控制。本节主要介绍如何在位的控制。本节主要介绍如何在HTMLHTML中使用中使用CSSCSS，包括行内式、内嵌，包括行内式、内嵌式、链接式和导入式等，最后探讨各种方式的优先级。式、链接式和导入式等，最后探讨各种方式的优先级。2.3.1行内式行内式是所有样式方法中最为直接的一种，它直接对行内式是所有样式方法中最为直接的一种，它直接对HTMLHTML的标的标记使用记使用stylestyle属性，然后将属性，然后将CSSCSS代码直接写在其中。代码直接写在其中。行内式2.3.2内嵌式内嵌式样式表就是将内嵌式样式表就是

17、将CSSCSS写在写在与与之间，并且用之间，并且用和和标记进行声明。标记进行声明。内嵌式2.3.3链接式链接式样式表是使用频率最高、链接式样式表是使用频率最高、也是最为实用的方法。它将也是最为实用的方法。它将HTMLHTML页面页面本身与本身与CSSCSS样式风格分离为两个或者多样式风格分离为两个或者多个文件，实现了页面框架个文件，实现了页面框架HTMLHTML代码与代码与美工美工CSSCSS代码的完全分离，使得前期制代码的完全分离，使得前期制作和后期维护都十分方便，网站后台作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的技术人员与美工设计者也可以很好地分工合作。地分工合作。

18、同一个同一个CSSCSS文件可以链接到多个文件可以链接到多个HTMLHTML文件中，甚至可以链接到整个网文件中，甚至可以链接到整个网站的所有页面中，使网站整体风格统站的所有页面中，使网站整体风格统一、协调，并且后期维护的工作量也一、协调，并且后期维护的工作量也大大减少。大大减少。链接式2.3.4导入式导入式样式表与链接式样式表的功能基本相同，只是语法和运作方导入式样式表与链接式样式表的功能基本相同，只是语法和运作方式上略有区别。采用式上略有区别。采用importimport方式导入的样式表，在方式导入的样式表，在HTMLHTML文件初始化时，文件初始化时，会被导入到会被导入到HTMLHTML文

19、件内，作为文件的一部分，类似内嵌式的效果。而链文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在接式样式表则是在HTMLHTML的标记需要格式时才以链接的方式引入。的标记需要格式时才以链接的方式引入。在在HTMLHTML文件中导入样式表，常用的有如下几种文件中导入样式表，常用的有如下几种importimport语句，可以语句，可以选择任意一种放在选择任意一种放在与与标记之间。标记之间。import url(sheet1.css);import url(sheet1.css);import url(sheet1.css);import url(sheet1.css);import

20、url(sheet1.css);import url(sheet1.css);import sheet1.css;import sheet1.css;import sheet1.css;import sheet1.css;import sheet1.css;import sheet1.css;2.4复合选择器2.32.3节介绍了节介绍了3 3种基本的选择器，以这种基本的选择器，以这3 3种基本选择器为基础，通过种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能，组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能，复合选择器就是由基本选择器通过不同的连

21、接方式构成的。复合选择器就是由基本选择器通过不同的连接方式构成的。复合选择器就是两个或多个基本选择器，通过不同连接方式而成的复合选择器就是两个或多个基本选择器，通过不同连接方式而成的选择器。选择器。2.4.1交集选择器交集选择器由两个选择器直接连接构成，其结果是选中二者各自元交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第素范围的交集。其中第1 1个必须是标记选择器，第个必须是标记选择器，第2 2个必须是类别选择器个必须是类别选择器或者是或者是IDID选择器。这两个选择器之间不能有空格，必须连续书写。选择器。这两个选择器之间不能有空格，必须连续书写。这种方式构成的

22、选择器，将选中同时满足前后二者定义的元素，也这种方式构成的选择器，将选中同时满足前后二者定义的元素，也就是前者所定义的标记类型，并且指定了后者的类别或者就是前者所定义的标记类型，并且指定了后者的类别或者idid的元素，因的元素，因此被称为交集选择器。例如，声明了此被称为交集选择器。例如，声明了p p、.special.special和和p.specialp.special这这3 3种选种选择器。择器。 h3.class color: red; font-size: 23px; 选择器 属性 值 属性 值 声明 声明 标记 类别名称 标记类别选择器交集选择器示意图2.4.2并集选择器与交集选择器

23、相对应，还有一种并集选择器，或者称为与交集选择器相对应，还有一种并集选择器，或者称为“集体声集体声明明”。它的结果是同时选中各个基本选择器所选择的范围。任何形式的。它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器（包括标记选择器、选择器（包括标记选择器、classclass选择器、选择器、IDID选择器等）都可以作为并选择器等）都可以作为并集选择器的一部分。集选择器的一部分。并集选择器是由多个选择器通过逗号连接而成的。在声明各种并集选择器是由多个选择器通过逗号连接而成的。在声明各种CSSCSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，就可选择器时，如果某些选择器的

24、风格是完全相同的，或者部分相同，就可以利用并集选择器同时声明风格相同的以利用并集选择器同时声明风格相同的CSSCSS选择器。选择器。并集选择器示意图2.4.3后代选择器在在CSSCSS选择器中，还可以通过嵌套的方式对特殊位置的选择器中，还可以通过嵌套的方式对特殊位置的HTMLHTML标记进标记进行声明，如当行声明，如当与与之间包含之间包含标记时，就可以使用后标记时，就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就称为外层标记的后代。的标记就称为外层标记的后代。嵌套选择器2.5CSS的继承特性本节进一步讲解后代选择器的应用，它将会贯穿在所有的设计中。本节进一步讲解后代选择器的应用，它将会贯穿在所有的设计中。若之前学过面向对象语言，那么对于继承（若之前学过面向对象语言，那么对于继承（InheritanceInheritance）的概念一定）的概念一定不会陌生。在不会陌生。在CSSCSS中的继承并没有像在中的继承并没有像在C+C+和和JavaJava等语言中那么复杂，简等语言中