美文网首页
CSS优先级

CSS优先级

作者: 元气满满321 | 来源:发表于2017-08-15 11:18 被阅读32次

    首要原则

    1.优先级高的样式覆盖优先级低的样式
    2.同一优先级的样式,后定义的覆盖先定义的,即后来居上

    多重样式间的优先级

    就近原则。如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

    一般情况下,优先级如下:

    (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

    同一样式表内部的优先级

    首先,回顾下CSS选择器的种类

    CSS选择器分类.png

    正确的优先级排序应该是:
    important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 元素 | 伪元素 > 继承 > 通配符
    所以表示下就是:
    id 1-0-0
    类|伪类|属性选择 0-1-0
    元素|伪元素 0-0-1
    通用选择器* 0-0-0

    总结

    • 多重样式间遵循:继承来的样式 < 浏览器缺省设置 < 外部样式表 = 内部样式表 < 内联样式
    • 而在同一样式表中存在:通用选择器* 0-0-0 < 标签选择器,伪元素 0-0-1 < 类选择器,属性选择器,伪类 0-1-0 < ID 选择器 1-0-0 << !important,其中对于组合选择器还要用上面提到的方法进行权重累加后才能判断
    • 首要原则:高优先级覆盖低优先级,同一优先级则后来居上

    每天都努力一点点
    谢谢你看完


    相关文章

      网友评论

          本文标题:CSS优先级

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