第2章 CSS3选择器
W3C在CSS3的工作草案中把选择器独立出来成为一个模块。实际上,选择器是CSS只是中的重要部分之一,也是CSS的根基。利用CSS选择器能不改动HTML结构,通过添加不同的CSS规则得到不同的样式的结果。
2.1 认识CSS选择器
要使用某个样式用于特定的HTML元素,首先需要找到该元素。在CSS中,执行这一任务的表现规则称为CSS选择器。它为获取目标元素之后施加样式提供了极大的灵活性。
2.1.1 CSS3选择器的优势
CSS3选择器在常规选择器的基础上新增了属性选择器、伪类选择器、过滤选择器。可以帮助您在开发中减少对HTML类名或ID名的依赖,以及对HTML元素的结构依赖,使编写代码更加简单轻松。如果学习过jQuery选择器,学习CSS3选择器会更容易,因为CSS3选择器在某些方面和jQuery选择器是完全一样的,唯一遗憾的是部分旧版本浏览器并不支持CSS3选择器。
2.1.2 CSS3选择器分类
根据所获取页面中元素的不同,把CSS3选择器分为五大类:基本选择器、层次选择器、伪类选择器、伪元素和属性选择器。其中,伪类选择器又分为六种:动态伪类选择器、目标伪类选择器、语言未来、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。如下图所示。
下面分别介绍着10种选择器
2.2 基本选择器
基本选择器是CSS种使用最频繁、最基础,也是CSS种最早定义的选择器。这部分选择器在CSS1中就定义了,为了更便于初学者温故而知新,不妨回顾CSS的基础选择器。
2.2.1 基本选择器语法
通过基本选择器可以确定HTML树形结构中大多数的DOM元素节点。详细说明如下所示:
选择器 | 类型 | 功能描述 |
---|---|---|
* |
通配选择器 | 选择文档中所有的HTML元素 |
E |
元素选择器 | 选择制定的类型的HTML元素 |
#id |
ID选择器 | 选择制定ID属性值为“id” 的任意类型元素 |
.class |
类选择器 | 选择之类 class 属性为“class” 的任意类型的任意多个元素 |
sleector1,selectorN |
群组选择器 | 将每一个选择器匹配的元素集合并 |
2.2.2 浏览器兼容性
基本选择器均可使用。
2.2.3 实战体验 : 使用基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS3基本选择器</title>
<style>
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background-color: #f36;color: green;margin-right: 5px;}
</style>
</head>
<body>
<ul class="demo clearfix">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
2.2.4 通配选择器
通配选择器(
*
)用来选择所有元素。当然也可以选择某个元素下的所有元素。如:
*{margin: 0;padding: 0;}
上面一行代码大家在Reset样式文件中经常看到,表示所有元素的margin和padding都设置为0。为了更好的说明问题,通过CSS3选择器中的通配选择器来改变列表中所有子项的北京色设置为orange
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background-color: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;} /* 元素类名为`demo`下的所有元素都将背景色设置为橙色。*/
如下图所示:
2.2.5 元素选择器
元素选择(E
)是CSS选择器中最常见、最基本的选择器。文档的元素包括html、body、div、p、div等
,示例中ul、li
也属于HTML元素。
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;}
ul{background: grey;} /* 通过ul元素选择器改变整个列表的背景色 */
2.2.6 ID选择器
在使用ID选择器(#id
)之前,需要在HTML文档中给对应的元素设置id
属性并设置其值,才能找到对应的元素。ID选择器具有唯一性,在一个页面中不会同事出现id
相同的属性值。在CSS样式中使用id
选择器时,需要在id
属性值的前面加上"#"
号,如(#id
)。
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;}
ul{background: grey;}
#first{background: lime;color: #000;} /* 改变id为first的元素的背景色和文字颜色 */
#last{background: #000;color: lime;} /* 改变id为last的元素的背景色和文字颜色 */
2.2.7 类选择器
类选择器(.class
)是以独立于文档元素的方式来制定元素样式。使用方法与ID选择器及其相似,所限在HTML 给需要的元素定义class
属性,并为其设置属性值。其与ID选择器有一个很大不同之处。类选择器在一个页面中可以有多个相同的类名,而ID选择器其ID值在整个页面中是唯一的一个。
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;}
ul{background: grey;}
#first{background: lime;color: #000;}
#last{background: #000;color: lime;}
.item{background: green;color: #fff;font-weight: bold;} /* 通过类选择器改变元素的样式 */
多类选择器用法:通过两个或两个以上类选择器合并,来定义有区别于一个类名的元素效果。
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;}
ul{background: grey;}
#first{background: lime;color: #000;}
#last{background: #000;color: lime;}
.item{background: green;color: #fff;font-weight: bold;}
.item.important{background: red;} /* 多类选择器用法 */
IE6选择器并不支持多类名选择器,并将以末尾类名为准。
2.2.8 群组选择器
群组选择器(selector1,selectorN
)是将具有相同样式的元素分组在一起,每个选择器之间用逗号(,
)隔开,例如:“selector1,selector2,...,selectorN”
。这个逗号告诉浏览器,规则中包含多个不同的选择器,省去逗号就变成了后代选择器,这一点大家在使用中千万要小心。