CSS选择器优先级以及权重计算⽅法
今天⾯试的时候⾯试官提问了选择器优先级的问题，本⾝是知道这个问题的答案的，由于第⼀次⾯试紧张，各种选择器的名字被置于脑后，⼀切的根源还是因为不够熟悉，所以通过这篇博客加强并深⼊了解选择器优先级的问题。
⼀、选择器优先级：!Important>⾏内样式>ID 选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性
1. !important：!important拥有最⾼的优先级，加上!importanrt可以覆盖⽗级的样式，使⽤⽅法为直接在样式后添加加
上!importanrt，如 color : red !important;
2. ⾏内样式：⾏内样式指写在标签style属性中的样式，优先级仅次于!important，缺点为多个元素难以共享样式，不利于代码复
⽤；HTML和CSS代码混杂，结构样式没有分离，不利于后期维护。所以建议尽量少使⽤⾏内样式。
3. ID选择器：ID 选择器会根据该元素的 ID 属性中的内容匹配元素，⼀个id只能使⽤⼀次。
4. 类选择器：类选择器会根据元素的类属性中的内容匹配元素，可以重复使⽤，是最常⽤的选择器。
5. 标签选择器：标签选择器是指⽤HTML标签名称作为选择器，优点是能快速为页⾯中同类型的标签统⼀样式，缺点是不能设计差
异化样式。
6. 通配符选择器：通配符选择器为*，指给当前界⾯上所有的标签设置属性。由于通配符选择器是设置界⾯上所有的标签属性，所
以在设置之前会遍历所有的标签，如果当前界⾯上的标签⽐较多，那么性能就会⽐较差。
7. 继承：继承指当⼦元素没有设置某个属性时，会继承⽗元素的属性。
8. 浏览器默认属性：浏览器本⾝设置好的属性，若未对元素设置属性，则会设置为浏览器默认属性。
注：关于继承的详情
1. 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-
width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
2. 所有元素可继承：visibility和cursor。
3. 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、
font-style、font-variant、font-weight、text- decoration、text-transform、direction。
4. 块状元素可继承：text-indent和text-align。
5. 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
6. 表格元素可继承：border-collapse。
⼆、CSS权重
1.权重：css 属性选择器
第⼀等：内联样式，如：，权值为 1000.（该⽅法会造成 css 难以管
理，所以不推荐使⽤）。
第⼆等：ID 选择器，如：#header，权值为 0100。
第三等：类、伪类、属性选择器如：.bar， 权值为 0010。
第四等：标签、伪元素选择器，如：div ::first-line 权值为 0001。
最后把这些值加起来，再就是当前元素的权重了。
其他：
⽆条件优先的属性只需要在属性后⾯使⽤!important。它会覆盖页⾯内任何位置定义
的元素样式。（ie6 ⽀持上有些 bug）
通配符，⼦选择器，相邻选择器等。如*，>,+, 权值为 0000。
继承的样式没有权值。
2.CSS 权重计算⽅式
2.1.计算选择符中的 ID 选择器的数量（=a）
2.2.计算选择符中类、属性和伪类选择器的数量（=b）
2.3.计算选择符中标签和伪元素选择器的数量（=c）
2.4.忽略全局选择器
2.5.在分别计算 a、b、c 的值后，按顺序连接 abc 三个数字组成⼀个新的数字，改值即
为所计算的 选择符的权重。如果两个选择符的计算权重值相同，则采取“就近原则”。                ⽰例：
div#app.child[name="appName"] /*a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121*/
注：CSS 选择器：
1、id 选择器（ # myid）
2、类选择器（.myclassname）
3、标签选择器（div, h1, p）
4、相邻选择器（h1 + p）
5、⼦选择器（ul > li）
6、后代选择器（li a）
7、通配符选择器（ * ）
8、属性选择器（a[rel = "external"]）
9、伪类选择器（a:hover, li:nth-child）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。