基本选择器语法

基本选择器是CSS3所有选择器中效果最好的一种，所有的浏览器均支持基本选择器，因此在以后的开发和学习中可以放心地使用。
下面我们在实战中体会基本选择器的用法：
我们先将基本的框架搭出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{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;cursor: pointer;
			text-align:center; background: #f36;color: green;margin-right: 5px;}
	</style>
</head>
<body>
	<ul class="clearfix demo">
		<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>

上面的代码使用了基本选择器，首先看看页面的初步效果，如图：
alt text

1.通配选择器

通配选择器（*）用来选择所有元素，当然也可以选择某个元素下的所有元素。如：

1
*{margin:0;padding:0}

为了更好地说明问题，通过CSS3选择器中的通配选择器来改变列表中的所有子项的背景色设置为orange。

1
2
3
4
5
6
7
8
9
*{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;cursor: pointer;
			text-align:center; background: #f36;color: green;margin-right: 5px;}
.demo *{background:orange}

此时元素类名为demo下的所有元素都将背景色设置为橙色，如图：
alt text

2.元素选择器

元素选择器（E）是CSS选择器中最常见的、最基本的选择器。文档元素包括html、body、p、div等，如示例中的ul、li也属于HTML元素。接下来通过ul元素选择器改变整个列表的背景色。

1
2
3
4
5
6
7
8
9
10
*{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;cursor: pointer;
			text-align:center; background: #f36;color: green;margin-right: 5px;}
.demo *{background:orange}
ul{background:grey}

此时列表ul的背景色将变成灰色，如图：
alt text

3.ID选择器

在使用ID选择器之前，需要在HTML文档中给对应的元素设置id属性并设置其值，才能找到对应的元素。ID具有唯一性，使用时，需要在id属性前加上’#’。在下面的事例中，我们可以轻松地看到列表中的第一项和最后一项分别定义了一个id，其值分别为“first”和“last”。使用这两个id值来改变列表项中第一个和最后一个列表项的背景色和前景色，代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
*{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;cursor: pointer;
			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}

页面效果如下：
alt text

4.类选择器

类选择器（.class）是以独立于文档元素的方式来指定元素样式。使用方法与ID选择器极其类似，首先在HTML给需要的元素定义class属性，并为其设置属性值。类选择器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个。下面改变item的风格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*{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;cursor: pointer;
			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:#font-weight:bold}

效果如图：
alt text
上面是类选择器的简单使用，其实类选择器还有一种使用方法，就是多类选择器。通过两个或两个以上类选择器合并，来定义有别于一个类名的元素效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
*{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;cursor: pointer;
			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:#font-weight:bold}
.item.important{background:red}

效果如图：
alt text

使用多类选择器时，大家需要注意，如果一个多类选择器包含类名中的其中有一个不存在，则匹配失败，示例中的item和important两个类名有一个不存在的话都会匹配失败。

类名可以同时绑定在多种不同元素标签上，如在同一个HTML文档中，div元素可以绑定item，ul也可以绑定item……，如果想要获取某种特定标签中的item，如ul上的item，则可以用：ul.block{background:red}

5.群组选择器（selector1,selectorN)

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间用逗号隔开。