CSS选择器(1h)

1、 引入引入CSSCSS的核心目的就是实现网页内容的核心目的就是实现网页内容和表现形式的分离，将原来由和表现形式的分离，将原来由HTMLHTML语言所语言所承担的一些与结构无关的功能剥离出来，承担的一些与结构无关的功能剥离出来，改由改由CSSCSS来完成。来完成。 构造构造CSS规则规则1.2基本基本CSS选择器选择器1.3在在HTML中使用中使用CSS的方法的方法1.4复合选择器复合选择器1.5CSS的继承特性的继承特性1.6CSS简介简介1.1Css简介简介1.2 1.2 构造构造CSSCSS规则规则 张飞 身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; 实际

2、上是由实际上是由3 3个要素组成的，即姓名、属个要素组成的，即姓名、属性和属性值。性和属性值。 CSS CSS的作用就是设置网页的各个组成部的作用就是设置网页的各个组成部分的表现形式。分的表现形式。 因此，如果把上面的内容换成描述网因此，如果把上面的内容换成描述网页上一个页上一个标题标题的属性表，应该大致如下：的属性表，应该大致如下： 2 2级标题级标题 字体字体: :宋体宋体; ; 大小大小:15:15像素像素; ; 颜色颜色: :红色红色; ; 装饰装饰: :下划线下划线 如果把上面的表格用英语写出来：如果把上面的表格用英语写出来： h2h2 font-family: font-famil

3、y: 宋体宋体; ; font-size:15px; font-size:15px; color: red; color: red; text-decoration: underline; text-decoration: underline; CSS CSS的思想就是首先指定对什么的思想就是首先指定对什么“对象对象”进进行设置，然后指定对该对象的哪个方面的行设置，然后指定对该对象的哪个方面的“属性属性”进行设置，最后给出该设置的进行设置，最后给出该设置的“值值”。 因此，概括来说，因此，概括来说，CSSCSS就是由就是由3 3个基本部分个基本部分“对象对象”、“属性属性”和和“值值”组成的。

4、组成的。1.2 1.2 基本基本CSSCSS选择器选择器 在在CSSCSS的的3 3个组成部分中，个组成部分中，“对象对象”是是很重要的，它指定了对哪些网页元素进行很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称设置，因此，它有一个专门的名称选选择器（择器（selectorselector）。）。1.2 1.2 基本基本CSSCSS选择器选择器 1.2.1 1.2.1 标签选择器标签选择器 1.2.2 1.2.2 类选择器类选择器 1.2.3 ID1.2.3 ID选择器选择器1.2.1 1.2.1 标签选择器标签选择器h1 color: red; font-size: 25p

5、x; 选择器 属性 值 属性 值 声明 声明 图图2.1 CSS标签选择器标签选择器1.2.1 1.2.1 标签选择器标签选择器1.2.2 1.2.2 类选择器类选择器.class color: green; font-size: 20px; 类别选择器 属性 值 属性 值 声明 声明 类别名称 图图2.2 类选择器类选择器 当页面中同时出现当页面中同时出现3 3个个标记，并且希望标记，并且希望它们的颜色各不相同，就可以通过设置不它们的颜色各不相同，就可以通过设置不同的类选择器来实现。同的类选择器来实现。 实例查看文件：实例查看文件：01-01.html01-01.html。 如果所有的如果所

6、有的标记都使用相同的样式风格，标记都使用相同的样式风格，只有个别特殊的只有个别特殊的标记需要使用不同的风格来突标记需要使用不同的风格来突出，这时可以通过类选择器配合标签选择器使用，出，这时可以通过类选择器配合标签选择器使用，实例查看文件实例查看文件01-02.html01-02.html。 在在HTMLHTML的标记中，还可以同时对一个标记运用多的标记中，还可以同时对一个标记运用多个类选择器，从而将两个类别的风格同时运用到个类选择器，从而将两个类别的风格同时运用到一个标记中，实例文件为一个标记中，实例文件为01-03.html01-03.html。 注意：如果使用了相冲突的两个类，则以定义时注

7、意：如果使用了相冲突的两个类，则以定义时的顺序为基准，采用最近定义的类样式。如下例：的顺序为基准，采用最近定义的类样式。如下例：1.2.3 ID1.2.3 ID选择器选择器#id color: yellow; font-size: 30px; ID选择器 属性 值 属性 值 声明 声明 图图2.6 ID选择器选择器 IDID选择器实例选择器实例1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法2.3.1 2.3.1 行内式（行内式（01-05.html01-05.html）2.3.2 2.3.2 内部内部CSSCSS样式样式(01-06.html)(01-06.html)

8、2.3.3 2.3.3 外部外部CSSCSS样式样式(01-07.html)(01-07.html)2.3.4 2.3.4 导入式导入式(01-09.html)(01-09.html) 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法2.3.1 2.3.1 行内式（行内式（01-05.html01-05.html） 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法1.3.2 1.3.2 内部内部CSSCSS样式样式(01-06.html)(01-06.html) 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法1.3.3

9、1.3.3 外部外部CSSCSS样式样式(01-07.html)(01-07.html) 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法1.3.4 1.3.4 导入式导入式(01-09.html)(01-09.html) 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法1.3.4 1.3.4 导入式导入式(01-09.html)(01-09.html) 说明：说明：导入样式表的最大用处在于可以让一个导入样式表的最大用处在于可以让一个HTMLHTML文件中导入很多的文件中导入很多的样式表，例样式表，例01-11.html01-11.html。 注

10、意注意importimport关键词用在关键词用在内或者另一个内或者另一个csscss文件内。文件内。 1.4 1.4 复合选择器复合选择器1.4.1 1.4.1 交集选择器交集选择器1.4.2 1.4.2 并集选择器并集选择器1.4.3 1.4.3 后代选择器（父子）后代选择器（父子）1.4.4 1.4.4 通配符选择器通配符选择器1.4.5 1.4.5 选择器优先级选择器优先级1.4.1 1.4.1 交集选择器交集选择器 1.1.交集选择器由两个选择器直接连接构成，中间不能有空格，交集选择器由两个选择器直接连接构成，中间不能有空格，必须连续书写；必须连续书写；2.2.第一个必须是标签选择器

11、，第二个必须是类选择器或者是第一个必须是标签选择器，第二个必须是类选择器或者是IDID选择器。选择器。3.3.这种方式构成的选择器，将选中同时满足前后二者定义的这种方式构成的选择器，将选中同时满足前后二者定义的元素。元素。4.4.假设定义了标签选择器假设定义了标签选择器h3h3和类选择器和类选择器.special.special和交集选择和交集选择器器h3.specialh3.special，则效果如图：，则效果如图： 图图2.14 交集选择器示意图交集选择器示意图 实例查看文件：实例查看文件：01-12.html01-12.html。1.4.2 1.4.2 并集选择器并集选择器 1.1.任何

12、形式的选择器，都可以作为并集选择器的一部分；任何形式的选择器，都可以作为并集选择器的一部分；2.2.它的结果是同时选中各个基本选择器所选择的范围；它的结果是同时选中各个基本选择器所选择的范围；3.3.并集选择器是多个选择器通过逗号链接而成的。并集选择器是多个选择器通过逗号链接而成的。 实例查看源文件实例查看源文件01-13.html01-13.html。1.4.3 1.4.3 后代选择器后代选择器1.1.后代选择器的写法就是把外层的标记写在前面，内后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，中间用空格分隔；层的标记写在后面，中间用空格分隔；2.2.当标记发生嵌套时，内层的标记

13、就称为外层标记的当标记发生嵌套时，内层的标记就称为外层标记的后代。例如：后代。例如： 外层的文字外层的文字中间层的文字中间层的文字最内层的文字最内层的文字1.4.3 1.4.3 后代选择器后代选择器3.3.实例源文件实例源文件01-15.html01-15.html。1.4.4 1.4.4 通配符选择器通配符选择器课堂练习课堂练习1.5 CSS1.5 CSS的继承特性的继承特性 1.5.1 1.5.1 继承关系继承关系 1.5.2 CSS 1.5.2 CSS继承的运用继承的运用 1.5.3 CSS 1.5.3 CSS的冲突特性的冲突特性 1.5.1 1.5.1 继承关系（树）继承关系（树）1.

14、 1. 在在CSSCSS中的继承比较简单，即将各个中的继承比较简单，即将各个HTMLHTML标签看做一个容器，其中被包含的标签看做一个容器，其中被包含的小容器会继承包含它的大容器的风格样式；小容器会继承包含它的大容器的风格样式；2. 2. 所有的所有的CSSCSS语句都是基于各个标签之间的继承关系的，为了更好理解继承关语句都是基于各个标签之间的继承关系的，为了更好理解继承关系，首先从系，首先从HTMLHTML文件的组织结构入手，示例文件为文件的组织结构入手，示例文件为01-16.html01-16.html，树形结构如，树形结构如下图：下图：实例源文件实例源文件01-16.html01-16.

15、html。 图图1.21 继承关系树型图继承关系树型图 1.5.2 CSS 1.5.2 CSS继承的运用继承的运用1. CSS1. CSS继承是指子标签会继承父标签的所有样式风格，并可以在父标签样式风继承是指子标签会继承父标签的所有样式风格，并可以在父标签样式风格的基础上再加以修改，产生新的样式，而子标签的样式风格完全不会影响格的基础上再加以修改，产生新的样式，而子标签的样式风格完全不会影响父标签。实例文件父标签。实例文件01-17.html01-17.html。 1.5.2 CSS 1.5.2 CSS继承的运用继承的运用 可以看到：可以看到： （1 1）子标签）子标签emem也显示了下划线，说明对父标签的设置也对子标签有效；也显示了下划线，说明对父标签的设置也对子标签有效； （2 2）而）而emem文字显示为红色，文字显示为红色，h1h1标题仍然为蓝色，说明对子标签的设置不会影标题仍然为蓝色，说明对子标签的设置不会影响父标签；响父标签； （3 3）思考：如何将嵌套最深的第）思考：如何将嵌套最深的第3 3级列表的文字显示为粗体？级列表的文字显示为粗体？ 请对比文件：请对比文件：01-18.html01-18.html（能否实现）和文件（能否实现）和文件01-19.html01-19.html（后代选择（后代选择器）