作者 | 开课吧无忧
编辑 | 开三金
来源 | 开课吧前端团队（ID:KKBWeb）
三金有话说：
为了满足前端萌新粉丝的需求，这篇文章还是非常非常的接地气，很适合新手前端阅读~前端基础较为扎实的“老前端”玩家不要心灰意冷，三金会继续为大家带来实用有效的深层前端干货！
感谢各位小伙伴的关注，给大家打call~
前五篇传送门：
1
最常用的方法就是用外联样式，然后通过css选择器选择不同的元素，为其加上不同的样式。
也就是说我们从事前端工作，在开发页面的过程中是肯定绕不开css选择器的，其重要性也就不言而喻了。
废话不多说，我们来看一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height:100px;
background: #1b6d85;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>得到的结果是这样的：
那么在这一段代码中，有一个style标签，里面写的就是css样式：
#box{
width: 100px;
height:100px;
background: #1b6d85;
}
这段代码中就用到了选择器，这段代码选择了一个ID名称为box的元素，并为其加上我们想要的样式，这里面的选择器就是前面的：
#box{} 前面的“#”标识符表示这个选择器将会选择ID名称，并不能选择其他的属性。
而紧跟其后的"box"则是代表要选择的ID属性的值。然后后面是大括号，大括号里面写的就是css样式了。这个选择器也叫ID选择器。
那么除了ID选择器以外，还有很多其他的选择器，最常见的有类选择器,如“.box{}”；
这就是一个类选择器，千万要注意，在选择器的名字前面有一个点哦！
还是来看看代码把。
之前的样式其实也可以这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height:100px;
background: #1b6d85;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>注意这段代码和上一段代码的一个区别：
其中div标签身上的ID属性被替换成了class属性，其里面的值还是没有变化，还是box。
第二个区别就是css部分，一个很小的改变：box前面的“#”变成了“.”；
那么这个点代表的就是这个选择器选择的是一个class属性
小总结一下：
#box{}/*这是ID选择器，注意前面是用井号开头的，井号代表ID*/
.box{}/*这是class选择器，注意前面是用点开头的，点代表class*/
2
除了这两个选择器之外，还有：
标签选择器：顾名思义，也就是选择某一些标签
包含选择器：这个是一个组合选择器，由一个选择器包含住另一个选择器来实现精确查找
群组选择器：各种选择器组合在一起，选择一组元素
下面来看一下这些选择器的一个使用场景：
标签选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:100px;
height:100px;
background:#0c5460;
}
</style>
</head>
<body>
<h1></h1>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
<p></p>
<h2></h2>
</body>
</html>比如这种情况，一堆的标签，当你并不想给这些标签加上任何的属性，然后你又需要选中所有的div标签 那么这时候就可以使用标签选择器。
标签选择器的组成是：标签名+大括号；
注意：这个选择器前面不需要加任何的标识符。
名字也不是随便起的，名字就是标签名，代表选择某一个标签。
包含选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 em{
color: red;
}
</style>
</head>
<body>
<h1>
这里是标题<em>重要内容</em>
</h1>
</body>
</html>当我们需要选择em标签的时候，其实在这个案例里面可以直接使用em{}这个标签选择器；
但是我们在正常的开发中，html结构比这个要复杂很多，那么这时候为了避免选中其他的元素，我们就需要用到包含选择器：
"h1 em{}" 这个选择器的意思是在h1标签里面选择em标签。
这个选择器也叫后代选择器。
注意：包含选择器之间一定要用空格隔开。
另外，包含选择器选择的是所有的后代，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 span{
color: red;
}
</style>
</head>
<body>
<h1>
这里是标题<em>重要<span>的</span>内容</em>
</h1>
</body>
</html>比如这里的包含选择器：
h1 span{}同样能选中h1标签里面的span标签，尽管span标签被em所包含，但是依然能够选中，这一点一定要注意。
另外，包含选择器还有一种，叫子级选择器，这个选择器的写法是：
h1>span{},中间不再是空格，而是一个大于号。
这个选择器的意思是在h1的子元素里面选择span元素，在上面的代码块中 span元素其实算是h1标签的孙级元素，所以用这个子级元素是不能选中span标签的
注意：
<h1>
这里是标题<em>重要<span>的</span>内容</em>
</h1>在这个结构中：
用h1 span{}这个选择器可以选中span元素；
如果用h1>span{}这个选择器则不能选中span元素。
群组选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 span,h2 span,p>span{
color: red;
}
</style>
</head>
<body>
<h1>
这里是标题<em>重要<span>的</span>内容</em>
</h1>
<h2>
<span>这里是副标题</span>
</h2>
<p>
<span>这里是内容</span>
</p>
</body>
</html>比如这个结构，当我们需要同时选中不同元素所包含的span元素的时候，就可以用到群组选择器。
其实也就是多个选择器之间用逗号分隔，这样做可以节省一些代码。
这个选择器通常用在css reset里面。
当我们需要对多个标签清除其样式的时候，就可以这样写：
<style>
h1,
h2,
h3,
h4,
p,
dl,
dd{
margin:0;
}
</style>稍微格式化一下就可以了。