本篇文章主要讲述CSS选择器是什么，CSS选择器的分类，还有CSS选择器的优先级，如果有什么不足的地方欢迎大家来指点。
<h3>1.什么是CSS选择器？</h3>
答：每一条css样式定义由两部分组成，形式如下：选择器{样式}在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
</br>
<h3>2.CSS选择器常见的有几种?</h3>
<li>选择器的分类：</li>
选择器大致开分为：基础选择器、组合选择器、属性选择器、伪类选择器和伪元素等</br>
1.基础选择器
a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。
例子：
HTML：<div id="content">你好啊！</div>
CSS:#content{border:1px solid #fff;}
b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。
例子：
HTML:<div class="content">你好啊</div>
CSS:.content{border:1px solid #fff;}
c.元素选择器：通过note节点名称匹配元素。
例子：
HTML:<span>您好</span>
CSS:span{font-size:14px;}
2.组合选择器
| 选择器 | 含义 | 实例 |
|---|---|---|
| E,F | 多元素选择器，同时匹配所有E元素或F元素 | div,p{background-color:blue;} |
| E F | 后代元素选择器，匹配所有属于E元素的后代F元素 | div a{background-color:blue;} |
| E>F | 子元素选择器，匹配所有E元素的子元素F | div>h1{background-image:url(XXX.png);} |
| E+F | 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F | p+div{background-position:x% y%}; |
例子：
3.属性选择器
| 选择器 | 含义 | 实例 |
|---|---|---|
| E[att] | 匹配所有具有att属性的E元素 | p[style]{background-repeat:repeat-y;} |
| E[att=val] | 匹配所有att属性等于“val”的E元素 | div[class="c1"] |
| E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 | div[class~=c2] |
| E[att｜=val] | 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素 | p[lang｜=en] |
例子：
4.伪类选择器
| 选择器 | 含义 | 实例 |
|---|---|---|
| E:first-child | 匹配父元素E下的第一个子元素 | div:first-child{text-align:center;} |
| E:link | 匹配所有未被点击的链接 | ' |
| E:visited | 匹配所有已被点击的链接 | ' |
| E:active | 匹配鼠标已经按下、还没有释放的E元素 | ' |
| E:hover | 匹配鼠标悬停其上的E元素 | ' |
| E:focus | 匹配获得当前焦点的E元素 | ' |
| E:lang(c) | 匹配lang属性等于c的E元素 | ' |
例子：
5.伪元素
| 选择器 | 含义 | 实例 |
|---|---|---|
| E:first-line | 匹配E元素的第一行 | p:first-line{color:red;} |
| E:first-letter | 匹配E元素的第一个字母 | .c1:first-letter{color:blue; |
| E:before | 在E元素之前插入生成的内容 | .ctn before{content:"";display:block;;height:40px;width:40px;} |
| E:after | 在E元素之后插入生成的内容 | .ctn after{content:"";display:block;;height:40px;width:40px;} |
例子：
</br>
<h3>3.CSS的优先级?</h3>
小peter我初出茅庐，里面许多知识通过阅览其他同学的理解，和网上其它博客的文章，在整合而成，如果缺陷，请大家指点指点。
1.那么选择器的优先级是怎么规定的呢？
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示<b>标签名选择器</b>的优先级，用10表示<b>类选择器</b>的优先级，用100标示<b>ID选择器</b>的优先级。比如上例当中.polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：
例如：
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1
在比较样式的优先级时，只需统计选择符中的id、class和标签名的个数，然后把相应的权值相加即可，最后根据结果排出优先级
另外：
<li>权值较大的优先级越高
<li>权值相同的，后定义的优先级较高
<li>样式值含有！important，优先级最高
<li>后代选择器的定位原则
在这里介绍一下对于后代选择器，浏览器是如何查找元素的呢？
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。**浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
<b>（此段转载饥人谷的犯迷糊的小羊）</b>
查看资料：
<a href="http://www.ruanyifeng.com/blog/2009/03/css_selectors.html">阮一峰CSS选择器</a>
<a href="http://www.jb51.net/css/95517.html">CSS选择器优先级分析</a>
<a href="http://www.jb51.net/css/67029.html">CSS选择器深入理解</a>
感谢观众：
