今天介绍一下，css选择器和选择器的优先级。
一、选择器
更加专业性的介绍，来看一下w3school中的描述，网址为：http://www.w3school.com.cn/cs...
下面单独说一下容易混淆的内容：
-
element>element 和 element element的区别：
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。加>的表示单纯的父子级关系，而不加>的为祖先关系，祖先关系包含父子级关系。这里很好理解，就不再展开说明了。
- a标签的四个伪类：link，visited，hover，active
link： 链接未被访问
visited： 链接已经被访问过
hover： 鼠标悬停在a标签
active： a标签被鼠标按着时这四个伪类在书写时，要按照一定的顺序：lvha，这是因为css中规定，同等优先权的样式，写在后面的会覆盖前面的。可以利用love和hate来记忆。
-
注意区分nth-child(n)和nth-of-type(n)
p: nth-child(n) //p标签且为第n个子元素
p: nth-of-type(n) //第n个p标签这个还是非常有必要详细展开的。
<!DOCTYPE html> <html> <head> <style> p:nth-child(2) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p> </body> </html>在这段代码中p:nth-child(2)表示p元素且为第二个子元素，p元素的父级为body，所以“第一个段落”的p标签为第二个子元素。将第二个子元素改为div，那么来看如下的代码：
发现p:nth-child(2)所寻找的元素不存在。因为不满足第二个条件。
再来说说nth-of-type(n)，这个比较理解，因为它的判断条件只有一个，第n个元素，我们将上面这段代码变换如下：
<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <div>第一个段落。</div> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p> </body> </html>那再来一段比较两者的代码：
<!DOCTYPE html> <html> <head> <style> p:nth-child(2) { background: yellow; } p:nth-of-type(2) { background: blue; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p> </body> </html>这样就能很清楚的看出两者的区别了。
二、选择器的优先级
在w3school中并没有给各个选择器名字，在css权威指南一书中，给出了选择器的名字，如通配选择器*{}，id选择器#id{}，class选择器.class{}，等等。
我们可以通过多个选择器给一个目标元素添加样式，如可以用通配选择器给所有元素一个border值，可以用div{}给所有div一个border值，还可以通过它的class名id名或者它的父级来设置border，那问题来了，这么多border，它要取哪个呢？
选择器的优先级，目前在网上来看有两种方法，但遵循的规则是一样的，即采用加权的计算方法，!important > id选择器 > class选择器 > 其他选择器。
!important 并不推荐使用，但存在就有存在的理由，但凡出现!important，均以!important为准，那要是出现多个呢？以最后一个为准。
可以给上述的选择器一个权值，如下（当然也可以自己设置一个权值，这个权值不易过小）
```
!important -- 1000
id选择器 -- 100
class选择器 -- 10
其他选择器 -- 1
```
另外一种方法是，
```
!important ： id选择器 ： class选择器 ： 其他选择器
eg.
1 : 0 : 0 : 0
0 : 1 : 0 : 1
0 : 0 : 1 : 0
0 : 0 : 0 : 1
```这里的比较大小怎么计算就很好看出了，从左向右比较，先比较左边第一位，相同则比较下一位，直到出现不同，较大的优先级高。上面中的例子eg，是优先级由大到小排列。
如果觉得还不错，就点一下下面的推荐吧，有什么问题，欢迎在下面的评论区留言~~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。