欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS的优先级顺序

程序员文章站 2022-03-03 08:00:29
...
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p { background-color: yellow !important; }    /*1.!important 优先级最高*/
        #p1 { background-color: blue; }               /*3.ID选择器*/
        .p1 { background-color: red; }                /*4.类选择器*/
        p { background-color: green; }                /*5.标签*/
        * { background-color: Highlight; }            /*6.通配符*/
        div { background-color: orange; }             /*7.继承*/
    </style>
</head>
<body>
    <div>
        <p id="p1" class="p1" style="background-color:lime">Hello</p>   <!--2.行内样式-->
    </div>
</body>
</html>

     优先级顺序（ 从高到低）：

  1. 标记为 !important
  2. 行内样式
  3. ID选择器
  4. 类选择器
  5. 标签
  6. 通配符
  7. 继承
  8. 默认样式

 

相关标签： CSS3 css css3

上一篇： Mybatis总结（持续补充）

下一篇： 51nod 1617 奇偶数组 分治

推荐阅读