CSS选择器(1h)技术总结.ppt

图2.14 交集选择器示意图 实例查看文件：01-12.html。 1.4.2 并集选择器 1.任何形式的选择器，都可以作为并集选择器的一部分； 2.它的结果是同时选中各个基本选择器所选择的范围； 3.并集选择器是多个选择器通过逗号链接而成的。 实例查看源文件01-13.html。 1.4.3 后代选择器 1.后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，中间用空格分隔； 2.当标记发生嵌套时，内层的标记就称为外层标记的后代。例如： p外层的文字span中间层的文字b最内层的文字/b/span/p 1.4.3 后代选择器 3.实例源文件01-15.html。 1.4.4 通配符选择器 课堂练习 1.5 CSS的继承特性 1.5.1 继承关系 1.5.2 CSS继承的运用 1.5.3 CSS的冲突特性 1.5.1 继承关系（树） 1. 在CSS中的继承比较简单，即将各个HTML标签看做一个容器，其中被包含的小容器会继承包含它的大容器的风格样式； 2. 所有的CSS语句都是基于各个标签之间的继承关系的，为了更好理解继承关系，首先从HTML文件的组织结构入手，示例文件为01-16.html，树形结构如下图：实例源文件01-16.html。 图1.21 继承关系树型图 1.5.2 CSS继承的运用 1. CSS继承是指子标签会继承父标签的所有样式风格，并可以在父标签样式风格的基础上再加以修改，产生新的样式，而子标签的样式风格完全不会影响父标签。实例文件01-17.html。 1.5.2 CSS继承的运用 可以看到： （1）子标签em也显示了下划线，说明对父标签的设置也对子标签有效； （2）而em文字显示为红色，h1标题仍然为蓝色，说明对子标签的设置不会影响父标签； （3）思考：如何将嵌套最深的第3级列表的文字显示为粗体？ 请对比文件：01-18.html（能否实现）和文件01-19.html（后代选择器）。 1.5.3 CSS冲突的特性 “冲突”有时候也称为层叠。 2. 分析实例文件01-20.html中每行的运行效果。 提示：优先级规则为： 行内样式 ID样式 类样式 标签样式 注意：如果使用了相冲突的两个类，则以定义时的顺序为基准，采用最近定义的类样式 * 第 1 章 CSS选择器与相关特性 引入CSS的核心目的就是实现网页内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。 构造CSS规则 1.2 基本CSS选择器 1.3 在HTML中使用CSS的方法 1.4 复合选择器 1.5 CSS的继承特性 1.6 CSS简介 1.1 Css简介 1.2 构造CSS规则 张飞 { 身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; } 实际上是由3个要素组成的，即姓名、属性和属性值。 CSS的作用就是设置网页的各个组成部分的表现形式。 因此，如果把上面的内容换成描述网页上一个标题的属性表，应该大致如下： 2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 } 如果把上面的表格用英语写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; } CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。 1.2 基本CSS选择器 在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。 1.2 基本CSS选择器 1.2.1 标签选择器 1.2.2 类选择器 1.2.3 ID选择器 1.2.1 标签选择器 图2.1 CSS标签选择器 1.2.1 标签选择器 1.2.2 类选择器 图2.2 类选择器 当页面中同时出现3个p标记，并且希望它们的颜色各不相同，就可以通过设置不同的类选择器来实现。 实例查看文件：01-01.html。