图解css3：核心技术与案例实战. 2.2 基本选择器
2.2 基本选择器
基本选择器是CSS中使用最频繁、最基础，也是CSS中最早定义的选择器，这部分选择器在CSS1中就定义了，为了便于初学者温故而知新，不妨回顾CSS的基础选择器。
2.2.1 基本选择器语法
通过基本选择器可以确定HTML树形结构中大多数的DOM元素节点。其详细说明如表2-1所示。
表2-1 基本选择器语法
选择器 类型 功能描述
* 通配选择器 选择文档中所有的HTML元素
E 元素选择器 选择指定的类型的HTML元素
#id ID选择器 选择指定ID属性值为“id”的任意类型元素
.class 类选择器 选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并
2.2.2 浏览器兼容性
浏览器兼容性如表2-2所示。从表中可以看出，浏览器对基本选择器都是一路绿灯通行，大家可以放心使用。
2.2.3 实战体验：使用基本选择器
下面通过示例介绍各种基本选择器在页面中的使用方法。
页面中有一个列表，其中第一个和最后一个设置了ID属性，其中部分列表项设置了class类名，通过基本选择器来改变元素的样式风格。
新创建一个HTML文件2-1.html，加入以下代码。
上面代码使用了基本选择器，首先看看页面的初步效果（背景为粉红色），如图2-2所示。
下面通过图解的方法说明CSS3基本选择器的使用方法。
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 outside 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}
此时元素类名为demo下的所有元素都将背景色设置为橙色，如图2-3所示。
2.2.5 元素选择器
元素选择器（E）是CSS选择器中最常见、最基本的选择器。文档的元素包括html、body、p、iv等，如示例中ul、li也属于HTML元素。接下来通过ul元素选择器改变整个列表的背景色。
*{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 outside 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-4所示。
2.2.6 ID选择器
在使用ID选择器（#id）之前，需要在HTML文档中给对应的元素设置id属性并设置其值，才能找到对应的元素。ID选择器具有唯一性，在一个页面中不会同时出现id相同的属性值。在CSS样式中使用id选择器时，需要在id属性值的前面加上“#”号，如（#id）。在下面这个示例中，可以轻松地看到列表中的第一项和最后一项分别定义了一个id，其值分别为“first”和“last”。使用这两个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 outside 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}
页面效果如图2-5所示。
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 outside 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-6所示的风格了。
上面是类选择器的简单使用，其实类选择器还有一种使用方法，就是多类选择器。通过两个或两个以上类选择器合并，来定义有别于一个类名的元素效果。
*{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 outside 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;}
使用多类选择器时，大家需要注意，如果一个多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到相匹配的元素，正如上面的代码，其只能匹配li元素同时具有“item”和“important”的元素，而只有其中任何一个类名都将无法匹配，如图2-7所示。
图2-7 多类名选择器使用效果
注
意 IE 6选择器并不支持多类名选择器，其将以末尾类名为准，大家使用时千万小心。
由于类名在一个HTML文档中可以同时存在于不同的元素标签上。换句话说，在一个HTML文档中，div可以有类名“block”，ul也可以有类名“block”，但有时在Web的页面开发中，仅需要对ul为“block”定义样式，此时仅采用类名选择器并不能达到需要的效果，其实CSS选择器还支持带有标签的类名选择器“ul.block”。
ul.block{background:#ccc;}
上面的代码只匹配class属性包含“block”的所有ul元素，但其他任何类型的元素都不匹配，包括有“blcok”类名的元素。简而言之，“ul.block”只会匹配ul元素，并且有一个类名“block”。不符合这两个条件的任何一个都不能与选择器匹配。
2.2.8 群组选择器
群组选择器（selector1,selectorN）是将具有相同样式的元素分组在一起，每个选择器之间用逗号（，）隔开，例如“selector1,selector2,…,selectorN”。这个逗号告诉浏览器，规则中包含多个不同的选择器，省去逗号就成了后代选择器，这一点大家在使用中千万要小心。
注
意 “selector1,selectorN”是群组选择器，表示选择匹配为selector1和selectorN的所有元素；“selector1 selectorN”是后代选择器（后面介绍），表示选择器selectorN所有元素为selector1的后代元素。