本文作者：开课吧无忧
图文编辑：开三金
最常用的方法就是用外联样式，然后通过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></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></div></body></html>
注意这段代码和上一段代码的一个区别：
其中div标签身上的ID属性被替换成了class属性，其里面的值还是没有变化，还是box。
第二个区别就是css部分，一个很小的改变：box前面的“#”变成了“.”；
那么这个点代表的就是这个选择器选择的是一个class属性
小总结一下：
#box{}/*这是ID选择器，注意前面是用井号开头的，井号代表ID*/.box{}/*这是class选择器，注意前面是用点开头的，点代表class*/
除了这两个选择器之外，还有：
标签选择器：顾名思义，也就是选择某一些标签
包含选择器：这个是一个组合选择器，由一个选择器包含住另一个选择器来实现精确查找
群组选择器：各种选择器组合在一起，选择一组元素
下面来看一下这些选择器的一个使用场景：
标签选择器：
<!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>
稍微格式化一下就可以了。
你“在看”我吗？
