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语法