写在前面：

以下内容是从菜鸟教程和csdn中学的，记录了6种常见的一些选择器，其中包括了选择器的定义方式、作用等。同时其中也会有一些选择器之间的区别和关系。其中还有属性选择器，但因为有的浏览器并不支持，所以这里就不放入其中了，其实这些选择器感觉上没有什么太大的区别，id和class选择基本上就已经比较适用于很多情况，可能这就是菜鸟教程里面选择器这里就拿出了id和class选择器的原因吧。

id选择器（ID Selector，IS）：

  • 描述：用来标记特定的HTML元素，然后指定其样式；
  • 语法格式：#选择器名{……….}之后使用的时候需要在标签属性里面加上（id=“选择器名”）才能使用；

以下为示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>这是学自菜鸟教程</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
/*这个就是css的id选择器的定义示例*/
</style>
</head>
<body>
<p id="para1">这是受影响的一段</p>
<p>这个是不受影响的一段</p>
</body>
</html>

以下为显示结果：
id选择器的示例的显示结果

class选择器（Class Selector，CS，类选择器）：

  • 描述：用于描述一组元素样式，class可以在多个元素中使用，class选择器在HTML中以class属性表示；
  • 语法格式：
    • 方式一：.选择器名{……….}；
    • 方式二：指定标签名.选择器名{……….}；

以下为方式一的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学自菜鸟网站</title>
<style>
.center
{
	text-align:center;
	color:blue
}
/*这个是方式一的示例代码,使用“.”表示*/
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

以下为示例一的显示结果:
class选择器方式一的示例显示

以下为方式二的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	h1.center{
		text-align: right;
		color: darkseagreen
	}
    p.center
    {
    	text-align:center;
    	color:lightskyblue
    }/*这个是方式二的示例代码*/
</style>
</head>
<body>
<h1 class="center">这个是靠右的</h1>
<p class="center">这个是居中的</p> 
</body>
</html>

以下为示例二的显示结果：
class选择器的方式二的示例结果

元素选择器（Element Selector，ES）：

  • 描述：元素选择器又名标签选择器；
  • 语法格式：标签名{…….}；

以下为示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	p{
	     text-align: right;
	     color: darkseagreen
	}
</style>
</head>
<body>
<h1>这个是靠右的</h1>
<p>这个是居中的</p> 
</body>
</html>

以下为示例代码显示结果：
元素选择器的显示结果

包含选择器（Package Selector，PS）:

  • 描述：特定的包含的标签内容才会匹配生效；
  • 语法格式：A B{……….}，（AB分别为两种标签）

以下为示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p{
  color:red;
}
div p{
  color:green;
}
</style>
</head>
<body>
	<p>这个是没有被包含的p标签元素</p>
<div>
  <p>这个是被包含的p标签元素</p>
</div>
</body>
</html>

以下为代码显示界面：
包含选择器的示例显示界面

子选择器（Sub Selector，SS）:

  • 描述：类似与PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许”子标签”甚至”孙子标签”及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签
  • 语法格式：A>B{…},A、B为HTML元素/标签）

以下为示例代码：

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div>p{
  color:red;
}
</style>         
</head>
	
<body>
<div>
  <p>这是第一个</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>这是第二个</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
  <p>这是第三个</p>
</div>
</body>
</html>

以下为代码显示界面：
子选择器的代码显示界面

兄弟选择器（Brother selector，BS）

  • 描述：BS是CSS3.0新增的一个选择器，在网上有看到两种符号的兄弟选择器分别是以’~’和’+’两种；
  • 语法格式：A~B{…}、A+B{…}（A、B为HTML元素/标签，）；
  • 说明：
    • A~B{…}：A标签后的B标签将会是其中的效果，当遇到一个新的不同与B的标签是截止；
    • A+B{…}：A标签后的第一个B标签将会是其中的效果；

以下为示例代码：

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h2~p{   
  color:red;
}          
h3+p{
	color:blueviolet;
}          
</style><!--这个是兄弟选择器里的'~'符号的选择器,这个是兄弟选择器里的'+'符号的选择器-->
</head>
	
<body>
<div>
    <p>这是第一个</p>
    <p>这是插入的一个,看看有没有变色</p>
    <h2>这是第二个</h2>
    <p>这是第三个</p>
    <p>这是第四个</p>
	<p>这是第五个</p>
	<div>
		<p>这个说明了'~'这个符号的选择器直到第二个后没有与第二个相同的标签后就会不受影响</p>
	</div>
	<h2>这是第六个</h2>
	<p>这是第七个</p>
	<p>这是第八个</p>
</div> <!--这个是兄弟选择器里的'~'符号的选择器的效果-->
<p>-----------------------------------------------</p>
<div>
    <p>这是第一个</p>
	<p>这是插入的一个,看看有没有变色</p>
    <h3>这是第二个</h3>
    <p>这是第三个</p>
    <p>这是第四个</p>
	<p>这是第五个</p>
	<h3>这是第六个</h3>
	<p>这是第七个</p>
	<p>这是第八个</p>
</div><!--这个是兄弟选择器里的'+'符号的选择器的效果-->
</body>
</html>

以下为代码显示界面：
兄弟选择器的两种不同的符号表示的效果演示

总结：

id选择器和class选择器的区别在于id选择器属性名不能重复，只能单一的使用，而class选择器可以让一个相同的html标签属性使用。另外需要注意的就是id选择器属性名不能使用数字开头，因为数字开头在Mozilla/Firefox中不起作用。同样的class选择器的类名的第一个字符也不能使用数字，因为使用数字后不能在Mozilla 或 Firefox 中起作用。