码迷,mamicode.com
首页 > Web开发 > 详细

css优先级之特殊性

时间:2017-03-03 16:31:00      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:元素   构建   first   color   gre   冲突   yellow   数学   over   

在前端开发的时候,css构建样式规则,这个时候我们会遇到一个问题:当我们对同一个元素做多个样式规则,其中发生了冲突的时候,css是如何选择最终呈现的样式

如下:

            div{
                color:red;
            }
            div.main{
                color:blue;
            }
            div#main2{
                color:green
            }
 
    <body>
        <div class="main" id="main2">
      ssss
</div> </body>

最终这个“sss”会是什么颜色呢?这就却决于css选择器的特殊性:

特殊性的描述可分为四个部分:如:0,0,0,0

什么意思呢?这四个数字,是有优先级的,这就类似于nvidia的显卡

我们先做如下定义:

四个数字,按位比较,从左到右优先级依次降低,每一位数字越大,特殊性越大,特殊性越大,有冲突的选择器规则将被使用到最终效果

用于比较时候:

从左往右比较两个选择器的特殊性,比较按同位比,如果当前位上,选择器1大于选择器2,选择器1特殊性大;如果当前位上,选择器1小于选择器2,选择器2特殊性大;如果相等,跳过当前位,比较下一位,方法与当前位同理

举例:(由大到小的特殊性)

1,0,0,0>

0,2,0,0>

0,1,2,0>

0,0,3,0>

0,0,1,0>

0,0,0,1>0,0,0,0

请先理解上面的例子,后面我们使用这种方式描述特殊性

我们看到特殊性描述一共有4位数,就像数学里的千,百,十,个一样

第一位:内联样式

第二位:ID选择器(#main)

第三位:类选择器,属性选择器或伪类(.main 或 input[name=main] 或 a:hover li:first-child)

第四位:元素或伪元素(p,div,input等常用的元素,伪元素比如p:first-letter p:first-line)

通配符*(0,0,0,0)

空格什么都不算(0,0,0,0都谈不上,最小特殊性)对选择器特殊性没有任何影响

举例:

假设以下的选择器指向同一个元素,并且出现了矛盾

1 h1{color:red;}    /*0001*/
2 p em{color:silver;}    /*0002*/
3 .grape{color:purple;}    /*0010*/
4 *.bright{color:blue;}    /*0010*/
5 p.bright{color:green;}    /*0022*/
6 #id{color:black;}    /*0100*/
7 div#id{color:yellow;}    /*0111*/

很显然最后这个这个元素,是黄色(yellow),因为他的特殊性最大!

css优先级之特殊性

标签:元素   构建   first   color   gre   冲突   yellow   数学   over   

原文地址:http://www.cnblogs.com/devilyouwei/p/6497250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!