首页 > 程序开发 > web前端 > HTML/CSS >

css选择器优先级问题

2017-09-01

css选择器优先级问题。优先级的算法:每个规则对应一个初始 "四位数 ":0、0、0、0,若是 行内选择符,则加1、0、0、0

优先级的算法:

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

  若是 行内选择符,则加1、0、0、0

  若是 ID选择符,则加0、1、0、0

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

  若是 元素选择符/伪元素选择符,则分别加0、0、0、1

若是 * 则为0、 0、 0、 0

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

  ②、优先级相同时,则采用就近原则,选择最后出现的样式;

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

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

选择符 分类

  1.标签选择器(如:body,div,p,ul,li) 1

  2.类选择器(如:class="head",class="head_logo") 10

  3.ID选择器(如:id="name",id="name_txt") 100

  4.全局选择器(如:*号) 0

  5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开) 10+10

  6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器) 100+10+1+1

  7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示 1+1+1

  8.继承选择器(如:div p,注意两选择器用空格键分开) 1+1

  9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。) 10

  10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含) ?

  11.子选择器 (如:div>p ,带大于号>) 1+1

  12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+,h1~p,带~号) 1+1

13 属性选择器*[title]a[href] input[type="text"] 10

14 伪元素p:first-line 1

例子 html>body table tr[id="totals"] td ul>li {color:maroon} 1+1+1+1+10+1+1+1=17

li#answer {color:navy} 1+100=101

div#sideber *[href] 1+100+10=111

#a div span input[type="text"] 100+1+1+10 =112

#a .div~input:hover 100+10+1+10=121

相关文章
最新文章
热点推荐