web前端开发技术与实践(ppt课件).pptx

Web前端开发技术与实践
第8章：选择器
阮晓龙
********** / ******@

河南中医学院管理信息工程学科
河南中医学院网络信息中心

1
本章主要内容
认识CSS选择器
基础选择器
层次选择器
伪装选择器
属性选择器
2

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

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

基础选择器是CSS中最基础、最常用的选择器，从CSS的诞生开始就一直存在，供Web前端开发者快速的进行DOM元素的查找与定位。
CSS语法由选择器、属性和值三部分组成，具体语法如下：
5


6


“*”在CSS中代表所有，即为通配符选择器。
通配符选择器是用来选择所有元素，同时也可以选择某个元素下的所有元素。
通配符选择器用于页面定义中：
通配符选择器用于选择器组合中：
通配符选择器的一种不常用的方式：
7

8
现场演示：
案例8-01：通配符选择器

元素选择器是CSS选择器中最常见且最基本的选择器。
元素选择器其实就是对文档的元素进行样式定义，可以为html，body，p，div元素等定义样式。
使用元素选择器的优点：
快速的将某个样式从一个元素转移到另一个元素上。
通过元素选择器可定义页面中所有使用该元素的样式，减少CSS代码的书写。
9

10
现场演示：
案例8-02：元素选择器