关闭

CSS的继承性,特殊性和层叠性

497人阅读 评论(0) 收藏 举报
分类:
CSS的继承性
    继承:继承是一种规则,它允许样式不仅应用于某个特定的html标签元素,
        而且应用于其后代。
    css的某些样式是具有继承性的。
    如:p{color:red;}
     <p>三年级时,我还是一个<span>胆小如鼠</span>的女孩。</p>

    这里span 为子元素标签,p中的文本 和span 中的文本都设置为了红色。

      而    p{border:1px solid red;}--为p标签设置了  边框为1像素,红色,实心边框线 不具有继承性

CSS的特殊性
    我们为同一个元素设置了不同的CSS样式,那么元素会启用哪一个CSS样式呢

    答案为:浏览器是根据权值来判断使用哪种CSS样式,用权值高的
    权值的规则:
        标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
p{color:red;}  //权值为1
p span{color:red;}  //权值为1+1=2
.warning{color:red;} //权值为10
p span.warning{color:red;}  //权值为1+1+10=12

#footer .note p{color:red;}  //权值为100+10+1=111
 
     继承也有权值但很低,为0.1--最低

CSS的层叠

html文件中对于同一个元素有多个CSS样式,

    而且这些样式具有相同的权重值,那么怎么办?


    层叠就是在html文件中对于同一个元素可以有多个CSS样式存在,当有相同权重的样式存在是,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用。


所以优先级就很好理解了:

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

重要性

    在做网页时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?

    我们可以使用!important 来解决  

    如:p{color:red!important;}       注意“: !important 要写在分号的前面

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:65336次
    • 积分:2048
    • 等级:
    • 排名:千里之外
    • 原创:95篇
    • 转载:9篇
    • 译文:0篇
    • 评论:63条
    最新评论