zoukankan      html  css  js  c++  java
  • CSS样式的优先级

    ------------------------------------------------------------------------
               |      最次要          |        <---->        |    最重要
    ------------------------------------------------------------------------
    样式生成于: |  浏览器的默认样式表    |  用户自己定义的样式表    |  页面开发者样式表
    ------------------------------------------------------------------------
    样式生成于: |  外部样式表           |  内部样式表           |  内联样式表
    ------------------------------------------------------------------------
    样式生成于: |  元素选择器           |  类选择器             |  ID选择器
    ------------------------------------------------------------------------
    
    当样式冲突时, CSS中同意使用!important指明样式具有更高的优先级

    p{color:blue; !important}

    1. 影响页面中元素的位置的属性,或者像margin,background color,border这些属性是不继承的。

    2. 浏览器自己定义的一些元素的样式。如link为蓝色的。headline的字体等等。

    3. 当css样式冲突时,继承的不会被採用。

     

    第三条事实上指明了css样式应用的还有一个规律:The Directly Applied Style Wins。

    当样式存在冲突时,直接运用的样式会被採用。就继承冲突而言还存在还有一条规律:Nearest Ancestor Wins。

     

    这里再讨论下one tag。 many styles的情况,比方:对于一个元素<p>我们既设置了id selector style又设置了class selector style,这样的情况下。如style不存在冲突,所设置的样式会组合起来运用到元素上。

    如存在冲突,css提供了一个公式去模拟优先级:

    • A tag selector is worth 1 point .

    • A class selector is worth 10 points .

    • An ID selector is worth 100 points .

    • An inline style is worth 1000 points .

    參考网址:There

  • 相关阅读:
    深入理解CSS中的margin负值
    深入理解CSS浮动
    深入理解CSS绝对定位
    深入理解display属性
    JAVA-初步认识-第四章-内存空间的划分&栈内存&堆内存
    JAVA-初步认识-第四章-数组-概述和定义
    JAVA-初步认识-第四章-重载练习
    JAVA-初步认识-第四章-重载
    JAVA-初步认识-第四章-函数-内存加载过程
    JAVA-初步认识-第一章-整体的认识
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5153607.html
Copyright © 2011-2022 走看看