CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计，我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等，我们只需要改几行代码，不需要借助任何软件，就能轻而易举的实现，感觉就像魔法师一般，几秒钟就能得到一个想要的效果，是不是很酷呢。
CSS为我们提供了选择器，这个酷酷的魔法工具，让我们随意能够操作网页元素的样式，CSS选择器众多，我们不可能一次性学完，但是这30个CSS选择器我们必须熟练记忆，可能有的同学觉得没必要学这么多，掌握了id、class、后代选择器就够了，这算完事了吗？如果是这样你就错过了很多灵活运用CSS的机会，虽然这些新属性很多都属于CSS3，但是我们掌握这些新属性后还是有很大的好处的。
从本篇文章起，我给大家归纳了常用的30个CSS选择器，希望通过我的总结，你能够喜欢上这些常用的选择器，废话不多说，我们这篇文章将介绍前10个。
在介绍之前，我们先理解下文档结构树的父子关系
在学习CSS选择器之前，我们需要弄清楚文档结构的父子关系，什么是父元素、子元素以及祖辈元素和后代元素这些概念，清楚了这些逻辑关系后，你才能更好的掌握CSS选择器。如下图所示，我们用树形结构来表示一个文档结构。
这里小编是一个有着5年工作经验的前端工程师，关于web前端有一个完整学习web前端的路线，学习材料和工具。需要的伙伴可以私信我，发送“前端”就可以获取领取地址，免费送给大家。对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。希望你也能凭自己的努力，成为下一个优秀的程序员！
如上图所示，相邻的两个节点（层级是连续的），他们之间是父子关系。如果两个元素之间跨越两个层级以上，它们是祖辈和后代的关系。
1、*：通用选择器
针对初学者来说，我们还是从简单的开始学起，首先我们来认识下通用选择器，然后再逐步深入学习其它高级的选择器，加入我们想让文档中的每个元素都显示成红色，我们可以这么做：
* {color:red;}
通用选择器，可以匹配页面所有的元素。 许多开发者可能会用这个技巧如下代码所示让元素居中，在开发测试阶段固然是好的，但是我不建议这么做，因为这样做会给浏览器增加很大的负担。
<code>* {/<code><code> margin: 0;/<code>
<code> padding: 0;/<code>
<code>}/<code>
浏览器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
2、#X：ID选择器
ID选择器的开头使用#号，但是你在使用的时候，需要谨慎。
问问自己：是否真的需要使用ID选择器来定义样式
id选择器比较局限，不能重用。因此需要慎重考虑。
<code>#container {/<code><code> width: 960px;/<code>
<code> margin: auto;/<code>
<code>}/<code>
浏览器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
3、.X：类选择器
类选择器的开头用.（点）进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式，好比按组进行归类，同一类的样式统一定义。
<code>.error {/<code><code>color: red;/<code>
<code>}/<code>
如果把两个类串在一起，选择的就是同时具有两个类名的元素，类名的顺序则无所谓，比如 class="urgent warning" , css 选择器你也可以这样写 .warning .urgent。
浏览器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
4、X Y：后代选择器
后代选择器，英文名称：descendant selector，本文的开头我们学习了什么是后代元素，比如我们要选择在li元素中包含a标签的链接（不是所有的链接），取消下划线的默认样式，我们可以这样代码实现：
<code>li a {/<code><code>text-decoration: none;/<code>
<code>}/<code>
经验分享: 如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的，后代元素的层级问题，可能会很深。
浏览器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
5、X：元素选择器
假如你想针对Html预定义的标签，比如类似：p,h3,em,a这些标签，我们可以快速为某类标签定义样式。如下段代码所示：
<code>a { color: red; }/<code><code>ul { margin-left: 0; }/<code>浏览器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
6、X:visited and X:link ：链接伪类选择器
:link 伪类来定义所有还没有点击链接的样式，:visited 伪类定义我们曾经点击过或者访问过的链接样式，示例代码如下：
<code>a:link { color: red; }/<code><code>a:visted { color: purple; }/<code>浏览器兼容性：
IE7+
Firefox
Chrome
Safari
Opera
7、 X + Y：紧邻同胞选择器
若想选择同一个父元素中，相邻的同级别的元素，我们可以使用紧邻同胞选择器（adjacent selector）。如若想把紧跟在h1元素的段落上外边距去掉，你可以这么写：
<code>h1 + p { margin-top:0 }/<code>
浏览器兼容性：
IE7+
Firefox
Chrome
Safari
Opera
8、 X > Y：子元素选择器
有时候我们并想选择所有的后代元素，而是想缩小范围，只选择一个元素的子元素，比如我们只想选择 #container>ul 定义id为container的div里的ul元素，而不是曾经更深的后代元素比如li里的ul。
html文档结构：
<code>/<code><code>/<code>
<code>List Item /<code><code>/<code>
<code>Child /<code><code><code><code>List Item /<code><code>List Item /<code><code>List Item /<code><code><code>
css代码如下:
<code>div#container > ul {/<code><code>border: 1px solid black;/<code>
<code>}/<code>
文档选择树形结构：
代码效果：
浏览器兼容性：
IE7+
Firefox
Chrome
Safari
Opera
9、 X ~ Y：后续同胞选择器
后续同胞选择器使用 ~ 表示，选择一个元素后面同属一个父元素的另一个元素。这个选择器和 X + Y 很像，但没那么严格。后续同胞选择器应用会更广泛。比如下面这个例子，我们选择所有ul后面的P元素。
html文档结构：
<code>/<code><code>/<code>
<code>List Item /<code><code>/<code>
<code>Child /<code><code><code><code>List Item /<code><code>List Item /<code><code>List Item /<code><code><code>Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor.
/<code><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
/<code><code>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor.
/<code><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
/<code><code>
css代码如下:
<code>ul ~ p {/<code><code> color: red;/<code>
<code>}/<code>
文档选择树形结构
代码效果：
浏览器兼容性：
IE7+ Firefox Chrome Safari Opera
10、 X[title]：简单属性选择器
如果想选择具有某个属性的元素，而不管属性的值是什么，我们可以使用简单属性选择器。例如想让带有title属性的链接标签才会被匹配，没有title属性的标签不会受到影响。你可以这么写代码：
<code>a[title] {
color: green;
}/<code>浏览器兼容性：
IE7+ Firefox Chrome Safari Opera
小节
今天的内容就和大家分享到这里，CSS选择器是CSS的基础和重要内容，虽然简单，但是灵活掌握可不容易，接下来的文章，我将和大家继续分享CSS选择器的剩余内容。
这里小编是一个有着5年工作经验的前端工程师，关于web前端有一个完整学习web前端的路线，学习材料和工具。需要的伙伴可以私信我，发送“前端”就可以获取领取地址，免费送给大家。对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。希望你也能凭自己的努力，成为下一个优秀的程序员！
閱讀更多 web前端學習圈 的文章
