美文网首页
css的继承、层叠和特殊性

css的继承、层叠和特殊性

作者: 随意人生_1b90 | 来源:发表于2017-04-25 17:31 被阅读0次

    1.css的继承

    1-1,

    p {

         color: #2f2

    }

    以上p标签的设置不仅仅应用于p标签,还应用于p标签中的所有子元素的文本(这便是css的继承)

    1-2,

    不过不是所有css样式都可以继承,如:

    p { 

        border:  1px  solid  #22F

    }

    p标签的此设置便不会被p标签中的子元素继承,它只设置p标签。

    2,css的特殊性

    2-1,css选择符的权值

    2-1.1:id选择符的权值为100

    2-1.2:类选择符的权值为10

    2-1.3:标签的权值为1

    2-1.4:继承也是有权限的,不过它的权限仅有0.1,是权限最小的

    2-2,权值高的规定css的样式

    2-3,权值的算法

    2-3.1

    #div1 p { color:yellow } /* 权值为 100+1=101 */    

    2-3.2

    #div1 .class p { color:yellow } /* 权值为 100+10+1=111 */

    2-3.3

    p span { color:yellow } /* 权值为 1+1=2 */

    2-3.4

    .class span { color:yellow } /* 权值为 10+1=11 */

    3,层叠

    3-1,在html中一个元素拥有多个样式,且权值相等,那么那个样式在后面那个样式便被应用

    h1 { 

        color: green 

    }

    h1 {

        color: red

     }

    运行效果:

    color:red被应用

    3-2,css样式表的优先级

    内联样式表(标签内部)>嵌入样式表(当前文件)>外部样式表(外部文件)

    4,重要性

    为样式设置最高权重,使用!important

    h1 {

        color: green!important;

    }

    h1 {

        color: red;

    }

    运行效果:

    color: green!important; 被应用

    在网页制作时不设计样式是的优先级:

     用户自己设置的样式>网页制作者样式>浏览器默认的样式

    但!important的权值高于用户自己设置的样式,优先应用

    相关文章

      网友评论

          本文标题:css的继承、层叠和特殊性

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