河南中医药大学：《Web前端开发技术与实践》课程教学课件讲稿（2015）第08章 选择器

Web前端开发技术与实践 第8章:选择器 阮晓龙 13938213680/ rxl@hactcmeducn http://web.51xueweb.cr 问南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9

Web前端开发技术与实践 第8章：选择器 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1

2 本章主要内容 口认识CSs选择器 口基础选择器 口层次选择器 口伪装选择器 米 口属性选择器 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容  认识CSS选择器  基础选择器  层次选择器  伪装选择器  属性选择器 2

3 1认识CSS选择器 口选择器是CSS的核心,从最初的元素选择器、类选择器、Ⅰ选择 器,演进到伪元素、伪类,以及CSS3提供的更为丰富的选择器, 使得定位页面上的任意元素开始变得愈发简单。 口在Web前端开发中,CSS定义着网站最受用户关注的前端表现部 分,HTM仅展示页面内容,而CSS则定义这网站各个部分的颜色、 字体、阴影等。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.认识CSS选择器  选择器是CSS的核心，从最初的元素选择器、类选择器、ID选择 器，演进到伪元素、伪类，以及CSS3提供的更为丰富的选择器， 使得定位页面上的任意元素开始变得愈发简单。  在Web前端开发中，CSS定义着网站最受用户关注的前端表现部 分，HTML仅展示页面内容，而CSS则定义这网站各个部分的颜色、 字体、阴影等。 3

4 1认识CSS选择器 口在CSS代码中,只是使用了 class属性区別其他服务,而此种方 法具有以下两种缺点: class属性本身并没有语义,其纯粹是为CSS样式服务,对于元素来 说是多余属性。 使用 class属性并没有把样式与元素绑定起来,针对同—个 class属 性,文本框可使用,下拉框也可使用,按钮也可使用。 口根据CSS3选择器功能可将选择器分为四部分: ■基础选择器、层次选择器、伪类选择器、属性选择器。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.认识CSS选择器  在CSS代码中，只是使用了class属性区别其他服务，而此种方 法具有以下两种缺点：  class属性本身并没有语义，其纯粹是为CSS样式服务，对于元素来 说是多余属性。  使用class属性并没有把样式与元素绑定起来，针对同一个class属 性，文本框可使用，下拉框也可使用，按钮也可使用。  根据CSS3选择器功能可将选择器分为四部分：  基础选择器、层次选择器、伪类选择器、属性选择器。 4

2.基础选择器 2.1语法 口基础选择器是CSS中最基础、最常用的选择器,从CS的诞生开 始就一直存在,供Web前端开发者快速的进行DOM元素的查找与 定位。 口CSS语法由选择器、属性和值三部分组成,具体语法如下 「选择器名字 属性值 属性值 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.基础选择器  基础选择器是CSS中最基础、最常用的选择器，从CSS的诞生开 始就一直存在，供Web前端开发者快速的进行DOM元素的查找与 定位。  CSS语法由选择器、属性和值三部分组成，具体语法如下： 5 2.1语法

2.基础选择器 2.1语法 表801基础选择器含义与示例 选择器 通用元素选择器,匹醒任问元素·( margin: 0. padding: O, 标签选择器,匹配所有使用E标签的 pI font-size 2em 1 n和 E.infoclass选择器,匹配所有cass属性中 info( background#m} 包含in的元素 p info i background: #if0,] 和E0选择器,匹配所有D属性等于( I background. 3 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.基础选择器 6 2.1语法

2.基础选择器 22通配符选择器 口“*”在CSS中代表所有,即为通配符选择器。 口通配符选择器是用来选择所有元素,同时也可以选择某个元素 下的所有元素。 通配符选择器用于页面定义中 margin: 0 padding 0 通配符选择器用于选择器组合中 dyco「#F000 通配符选择器的一种不常用的方式: body° font-size120%} 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.基础选择器  “*”在CSS中代表所有，即为通配符选择器。  通配符选择器是用来选择所有元素，同时也可以选择某个元素 下的所有元素。  通配符选择器用于页面定义中：  通配符选择器用于选择器组合中：  通配符选择器的一种不常用的方式： 7 2.2通配符选择器

8 十 2 现场演示: ■案例8-01:通配符选择器 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 8 现场演示：  案例8-01：通配符选择器

9 2.基础选择器 2.3元素选择器 口元素选择器是CSS选择器中最常见且最基本的选择器。 口元素选择器其实就是对文档的元素进行样式定乂,可以为html, body,p,div元素等定义样式。 口使用元素选择器的优点: 快速的将某个样式从一个元素转移到另一个元素上。 ■通过元素选择器可定乂页面中所有使用该元素的样式,减少CSS代 码的书写。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.基础选择器  元素选择器是CSS选择器中最常见且最基本的选择器。  元素选择器其实就是对文档的元素进行样式定义，可以为html， body，p，div元素等定义样式。  使用元素选择器的优点：  快速的将某个样式从一个元素转移到另一个元素上。  通过元素选择器可定义页面中所有使用该元素的样式，减少CSS代 码的书写。 9 2.3元素选择器

10 十 2 现场演示: ■案例8-02:元素选择器 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 10 现场演示：  案例8-02：元素选择器