• CSS学习(6)层叠


    1.声明冲突

    不同的样式,多次应用到同一元素

    层叠:解决声明冲突的过程,浏览器自动处理(权重计算)

    有时候需要修改样式的时候,可以使用优先级高的方式覆盖,而不是在源代码修改

    ①比较重要性

    (1)作者样式表中的 !important 样式 用法:color:red !important; 拥有最高优先级,慎用。

    (2)作者样式表中的普通样式

    (3)浏览器默认样式

    ②比较特殊性(看选择器)

    总体规则:选择器选中的范围越窄,优先级越高(如p.a比a优先级高)

    具体规则:通过选择器,计算一个四位数(逢256进1),数越大,优先级越高

    千位:内联样式,记做1,其他记做0

    百位:id选择器的数量,没有记做0

    十位:类选择器,属性选择器,伪类选择器的数量

    个位:元素选择器,伪元素选择器的数量

    ③比较源次序

    代码书写靠后的优先级高

    应用

    1.重置样式表

    书写一些作者样式,覆盖浏览器的默认样式

    就像是一种默认的标准格式的样式,通用的,先把浏览器的样式覆盖掉,后面具体的样式再写一个详细的样式表

    常见的重置样式表:normalize.css、reset.css、meyer.css

    2.爱恨法则(越写在后面的优先级越高)

    link > visited > hover > active

    a:link{color:black;}    正常

    a:visited{color:gray;} 访问过的

    a:hover{color:red;}     鼠标在上面时

    a:active{color:chocolate;} 鼠标按下时

  • 相关阅读:
    第二次结对作业
    第二次编程作业
    第一次编程作业
    第一篇随笔
    个人总结
    用例图设计
    第二次个人编程作业
    第一次个人编程作业
    第一次博客作业
    个人总结-以梦为马,砥砺前行
  • 原文地址:https://www.cnblogs.com/1016391912pm/p/11563911.html
Copyright © 2020-2023  润新知