💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
#第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元素状态伪类选择器、结构伪类选择器和否定伪类选择器。如下图所示。 ![](http://upload-images.jianshu.io/upload_images/1875545-009fca6770c4d842.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) **下面分别介绍着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.3效果图](http://upload-images.jianshu.io/upload_images/1875545-e765143ec56c39d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ###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.4效果图](http://upload-images.jianshu.io/upload_images/1875545-ad6e499fd817c583.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ###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.5 效果图](http://upload-images.jianshu.io/upload_images/1875545-61effc9c9a47e726.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ###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.6 效果图](http://upload-images.jianshu.io/upload_images/1875545-39bfaf13d9397a39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ###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;} /* 通过类选择器改变元素的样式 */ ![2.2.6 效果图](http://upload-images.jianshu.io/upload_images/1875545-3ffc7bacf480d98d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) **多类选择器用法:通过两个或两个以上类选择器合并,来定义有区别于一个类名的元素效果。** *{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选择器并不支持多类名选择器,并将以末尾类名为准。** ![多类选择器用法效果图](http://upload-images.jianshu.io/upload_images/1875545-8d0a8cc58330de84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ###2.2.8 群组选择器 群组选择器(`selector1,selectorN`)是将具有相同样式的元素分组在一起,每个选择器之间用逗号(`,`)隔开,例如:`“selector1,selector2,...,selectorN”`。这个逗号告诉浏览器,规则中包含多个不同的选择器,省去逗号就变成了后代选择器,这一点大家在使用中千万要小心。