css选择符优先级是哪个?

CSS 选择符有哪些?优先级是什么?下面本篇文章给大家介绍一下css选择符优先级。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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)

优先级

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承样式 > 浏览器默认样式

!important,使用此标记的CSS属性总是最优先的。

CSS样式优先级算法如何计算?

  • 内联样式表的权值最高 1000;

  • ID 选择器的权值为 100

  • Class 类选择器的权值为 10

  • HTML 标签选择器的权值为 1

css优先级是由四个级别和各个级别出现的次数决定的,值从左到右,左面的最大,一级大于一级

优先级算法

每个规则对应一个初始四位数:0,0,0,0

若是行内样式优先级,则是1,0,0,0,高于外部定义

<div style=”color: red”>sjweb</div>

若是ID选择符,则分别加0,1,0,0

若是类选择符,伪类选择符,属性选择符,则分别加0,0,1,0

若是元素选择器,伪元素选择器,则分别加0,0,0,1

需要注意

!important的优先级是最高的,但出现冲突时则需比较”四位数“

优先级相同时,则采用就近原则

继承得来的属性,其优先级最低

实例

body div p{color: green;}--Specificity值为0,0,0,3
Div #sjweb { font-size:12px;}--Specificity值为 0,1,0,1
html > body div [id=”totals”] ul li>p {color:red;}--Specificity值为 0,0,1,6

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css选择符优先级是哪个?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读