若是 元素选择符/伪元素选择符,则分别加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