美文网首页
CSS的优先级

CSS的优先级

作者: 放飞吧自我 | 来源:发表于2017-08-18 21:31 被阅读3次

    CSS选择器的优先级问题:作用元素一样,样式一样,就会发生冲突

    选择器的类型有:通配选择器、标签名选择器、class选择器、id选择器、群组选择器、后代选择器。后代选择器有一个相加的过程,而群组选择器没有这样的过程。

    1.类型相同的选择器,在样式发生冲突时,后面的覆盖前面的

    如:

    div{

    width:100px;

    height:100px;

    background:red;

    }

    div{

    background:green;

    }

    这个最后的结果是出现一个100*100的绿色的块

    2.不同类型的选择器,在样式发生冲突时,优先级高的覆盖优先级低的

    在html中:<div class="cla1"></div>

    在CSS中:

    div{

    width:100px;

    height:100px;

    background:blue;

    }

    .cla1{

    background:red;

    }

    最后出现的结果是100*100的红色块

    优先级的大小:通配选择器(*)< 标签名选择器(Tags)<  class选择器  <  id选择器  <  style  <  !important

    相关文章

      网友评论

          本文标题:CSS的优先级

          本文链接:https://www.haomeiwen.com/subject/rmqzrxtx.html