0%

CSS 选择器优先级

CSS 选择器

  1. 标签选择器(如:body,div,p,ul,li)
  2. 类选择器(如:class=”head”,class=”head_logo”)
  3. ID选择器(如:id=”name”,id=”name_txt”)
  4. 全局选择器(如:*号)
  5. 组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
  6. 后代选择器 (如:# head .nav ul li 从父集到子孙集的选择器)
  7. 群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
  8. 继承选择器(如:div p,注意两选择器用空格键分开)
  9. 伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
  10. 字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)
  11. 子选择器 (如:div>p ,带大于号>)
  12. CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

优先级

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

同一级别后写覆盖前写

默认规范

css选择器使用强烈建议采用低权重原则,利于充分发挥css的继承性,复用性,模块化、组件化。

.尽量少使用层级关系 # divclass p.colclass{color:red;} 改为 .colclass{color:red;}