CSS要想根据我们的需要对指定的东西进行美化，需要用到选择器。下面我们来看看基本的选择器是如何使用的。

一、内联样式

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<div style="color: skyblue;border: 1px dashed red;">我是南邮吴镇宇！</div>

</body>
</html>

一般情况下不会这么写，所以会涉及选择器，就是css到底对谁起作用。

1
<link rel="stylesheet" type="text/css" href="">

在外部放一个css文件。

二、选择器

2.1 ID选择器

就是给某个标签，比如div标签增加一个id="div1"，那么我就可以通过

1
2
3
#div1{
    border: 1px dashed red;
}

完整如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{
		    border: 1px dashed red;
		    color: skyblue;
		}
	</style>
</head>
<body>

	<div id="div1">我是南邮吴镇宇！</div>

</body>
</html>

但是精准控制每个id是不现实的，要累死人的，下面介绍标签选择器。

2.2 标签选择器
1
2
3
4
5
6
<style type="text/css">
	div{
		border: 1px dashed red;
	    color: skyblue;
	}
</style>

标签为div的都起作用了。这种方式也不好，因为范围太大了。

2.3 类选择器

形如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.div1{
			border: 1px dashed red;
		    color: skyblue;
		}
	</style>
</head>
<body>

	<div class="div1">我是南邮吴镇宇！</div>

	<div>我是南邮吴彦祖！</div>

</body>
</html>

这里的class可以写多个。这边可能会出现覆盖。但是注意类选择器的权重是小于ID选择器的，所以类选择器无法覆盖ID选择器的效果。

2.4 后代选择器

比如我这里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.div1{
			border: 1px dashed red;
		    color: skyblue;
		}
	</style>
</head>
<body>

	<div class="div1">
		我是南邮吴镇宇！
	</div>

	<div class="div1">
		我是南邮吴彦祖！
	</div>

</body>
</html>

那么这两个div都会起作用，但是如果我只想让吴镇宇变化咋办呢？我们可以给他加个span标签。span是.div的儿子。也可以给这个span里面加一个class，写法一样的。这就是后代选择器。

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
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.div1 span{
			border: 1px dashed red;
		    color: skyblue;
		}
	</style>
</head>
<body>

	<div class="div1">
		<span>
			我是南邮吴镇宇！
		</span>
	</div>

	<div class="div1">
		我是南邮吴彦祖！
	</div>

</body>
</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
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.div1{
			font-size: 16px;/*12px在谷歌中是最小的字体*/
			font-family: "宋体";/*字体样式，一般用默认即可*/
			font-style: italic;/*默认是normal,italic是斜体*/
			font-weight: 900;/*100-900的范围，默认是normal*/
			text-align: left;/*center置为中间*/
			text-indent: 2em;/*首行缩进*/
			line-height: 50px;/*调整一行的行高*/
		}

		a{
			text-decoration: none;/*去掉a标签的下划线*/
			color: green;/*设定默认链接是绿色*/
		}
		/*鼠标悬浮在a标签上之后就会变成红色并且出现下划线*/
		a:hover{
			color: red;
			text-decoration: underline;
		}
	</style>
</head>
<body>

	<div class="div1">
		我是南邮吴镇宇！
	</div>

	<a href="#">
		我是南邮吴彦祖！
	</div>

</body>
</html>

四、交集和并集

1
2
3
4
5
6
7
8
9
<body>

	<p>我是1号</p>
	<p id="id">我是2号</p>
	<p class="para">我是3号</p>
	<p class="para">我是4号</p>
	<p>我是5号</p>

</body>

如果想选标签是p并且class="para"的行，这就是交集：

1
2
3
4
5
<style type="text/css">
	p.para{
		color: red;
	}
</style>

如果我选择class="para"或者id="id"的行，这就是并集：

1
2
3
4
5
<style type="text/css">
	#id,.para{
		color: red;
	}
</style>