（一）选择器和选择器的优先级
本来想把标题写成css不得不说的那些事之选择器和选择器的优先级，但是为了本篇文章能被更多的人阅读，还是把名字改得老套一点。好了，废话不多说了，下面开始css不得不说的那些事的第一篇，选择器和选择器的优先级。
一、选择器
更加专业性的介绍，来看一下w3school中的描述，网址为：http://www.w3school.com.cn/cssref/css_selectors.asp
下面单独说一下容易混淆的内容：
- element>element 和 element element的区别：
element element | div p | 选择 元素内部的所有 元素。 element>element | 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标签
这个还是非常有必要详细展开的。
p:nth-child(2){background:# ff0000;}# 这是标题第一个段落。第二个段落。第三个段落。第四个段落。注释：Internet Explorer 不支持 :nth-child() 选择器。在这段代码中p:nth-child(2)表示p元素且为第二个子元素，p元素的父级为body，所以“第一个段落”的p标签为第二个子元素。将第二个子元素改为div，那么来看如下的代码：
发现p:nth-child(2)所寻找的元素不存在。因为不满足第二个条件。
再来说说nth-of-type(n)，这个比较理解，因为它的判断条件只有一个，第n个元素，我们将上面这段代码变换如下：
p:nth-of-type(2){background:# ff0000;}# 这是标题第一个段落。第二个段落。第三个段落。第四个段落。注释：Internet Explorer 不支持 :nth-child() 选择器。那再来一段比较两者的代码：
p:nth-child(2){background: yellow;}p:nth-of-type(2){background: blue;}# 这是标题第一个段落。第二个段落。第三个段落。第四个段落。注释：Internet Explorer 不支持 :nth-child() 选择器。这样就能很清楚的看出两者的区别了。
二、选择器的优先级
在w3school中并没有给各个选择器名字，在css权威指南一书中，给出了选择器的名字，如通配选择器*{}，id选择器# id{}，class选择器.class{}，等等。
我们可以通过多个选择器给一个目标元素添加样式，如可以用通配选择器给所有元素一个border值，可以用div{}给所有div一个border值，还可以通过它的class名id名或者它的父级来设置border，那问题来了，这么多border，它要取哪个呢？
选择器的优先级，目前在网上来看有两种方法，但遵循的规则是一样的，即采用加权的计算方法，!important > id选择器 > class选择器 > 其他选择器。
!important 并不推荐使用，但存在就有存在的理由，但凡出现!important，均以!important为准，那要是出现多个呢？以最后一个为准。
可以给上述的选择器一个权值，如下（当然也可以自己设置一个权值，这个权值不易过小）
!important -- 1000id选择器 -- 100class选择器 -- 10 其他选择器 -- 1 另外一种方法是，
!important ： id选择器 ： class选择器 ： 其他选择器eg. 1 : 0 : 0 : 0 0 : 1 : 0 : 1 0 : 0 : 1 : 0 0 : 0 : 0 : 1这里的比较大小怎么计算就很好看出了，从左向右比较，先比较左边第一位，相同则比较下一位，直到出现不同，较大的优先级高。上面中的例子eg，是优先级由大到小排列。
css重点的东西就可以分为两类，一个就是这篇文章所说的选择器，另一个就是具体的样式了。欢迎阅读《css不得不说的那些事》其他章节，如果觉得还不错，就点一下下面的推荐吧，有什么问题，欢迎在下面的评论区留言~~
关键字：css, css选择器, 选择器, 段落
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
