css 选择器优先级问题

xiaoxiao2021-02-27  192

  优先级的算法:   每个规则对应一个初始"四位数":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

                  

转载请注明原文地址: https://www.6miu.com/read-16552.html

最新回复(0)