类选择器样式，这个为什么是蓝色，哪个大佬解释下?

作者站长头像
站长
· 阅读数 6

<span class="a2 a3 a1">展示的内容</span>

<style>
    .a1{
        color: red;
    }
    .a2{
        color: green;
    }
    .a3{
        color: blue;
    }
</style>
回复
1个回答
avatar
test
2024-07-10

因为设置为蓝色的a3类在最下面, CSS 全称层叠样式表, 也就是说同样的样式同样的优先级哪个后出现就会覆盖前面的, 优先级高的会覆盖优先级低的

  • 第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
  • 第二优先级：在html标签中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
  • 第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
  • 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
  • 第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}

  • 第六优先级：通配选择器，如*{marigin:6px;}

    不是在标签里面写的顺序哦是在<style>里面的顺序, 如果你把a2类放在最下面就会是绿色了:answer imageanswer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容