摘要：今天介绍一下，选择器和选择器的优先级。选择父元素为元素的所有元素。注释不支持选择器。二选择器的优先级在中并没有给各个选择器名字，在权威指南一书中，给出了选择器的名字，如通配选择器，选择器，选择器，等等。
今天介绍一下，css选择器和选择器的优先级。
一、选择器更加专业性的介绍，来看一下w3school中的描述，网址为：http://www.w3school.com.cn/cs...
下面多带带说一下容易混淆的内容：
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标签这个还是非常有必要详细展开的。
这是标题
第一个段落。
第二个段落。
第三个段落。
第四个段落。
注释：Internet Explorer 不支持 :nth-child() 选择器。
在这段代码中p:nth-child(2)表示p元素且为第二个子元素，p元素的父级为body，所以“第一个段落”的p标签为第二个子元素。将第二个子元素改为div，那么来看如下的代码：
发现p:nth-child(2)所寻找的元素不存在。因为不满足第二个条件。
再来说说nth-of-type(n)，这个比较理解，因为它的判断条件只有一个，第n个元素，我们将上面这段代码变换如下：
这是标题
第一个段落。第二个段落。
第三个段落。
第四个段落。
注释：Internet Explorer 不支持 :nth-child() 选择器。
那再来一段比较两者的代码：
这是标题
第一个段落。
第二个段落。
第三个段落。
第四个段落。
注释：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 -- 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，是优先级由大到小排列。
如果觉得还不错，就点一下下面的推荐吧，有什么问题，欢迎在下面的评论区留言~~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115305.html
相关文章
HTTP 缓存的相关协议
摘要：上一篇文章梳理缓存的关键路径。这条路径的完成，依赖于协议。首次验证相关协议服务器在响应报文中设置或，缓存器对资源进行缓存。再次请求同一资源时，缓存器通过检查和，决定缓存是否过期的过程称为首次验证。因此，有双向控制缓存的能力。 上一篇文章 梳理 HTTP 缓存的关键路径。浏览器发起 HTTP 请求，请求报文发往浏览器内置的缓存器，缓存器经过首次验证，再决定是否向服务器发起缓存的再次验证。...
前端知识点总结——C3
摘要：前端知识点总结复杂选择器兄弟选择器兄弟元素具备相同父元素的平级元素之间称为兄弟元素。 前端知识点总结——C3 1.复杂选择器 1.兄弟选择器 兄弟元素：具备相同父元素的平级元素之间称为兄弟元素。 1.相邻兄弟选择器 作用：获取紧紧挨在某元素后的兄弟元素 语法：选择器1+选择器2{} 注意：兄弟选择器，只能向后找，不能向前找 2.通用兄弟选择器 作用：获取...
细说 jQuery 元素篇（二） - 选择符
摘要：为了更方便对元素操作，提供了完整的选择符体系，可以分为选择符属性选择符以及自定选择符。选择符几乎支持到规范中的所有选择符。介绍个比较有用的自定义选择符选择符。 为了更方便对 DOM 元素操作，jQuery 提供了完整的选择符体系，可以分为 CSS 选择符、属性选择符以及自定选择符。 CSS 选择符 jQuery 几乎支持 CSS1 到 CSS3 规范中的所有选择符。举例如下： ...
面试记录2
摘要：面试记录的原理，和进程相关进程和线程的关系进程和线程的区别选择器的优先级不同级别行内样式选择器类选择器标签通配符继承浏览器默认属性相同级别后面覆盖前面的闭包相关闭包的作用在函数外部读取函数内部局部变量在函数外部读取函数内部局部变量，变量被封 面试记录2 1. Ajax的原理，和进程相关 2. 进程和线程的关系 进程和线程的区别 3. css选择器的优先级 不同级别 !important...
发表评论
0条评论
阅读 2892·2023-04-26 01:30
阅读 514·2021-11-08 13:15
阅读 1490·2021-09-24 10:35
阅读 667·2021-09-22 15:41
阅读 1823·2019-08-30 15:44
阅读 358·2019-08-30 13:22
阅读 892·2019-08-30 13:06
阅读 1086·2019-08-29 13:22
