CSS的优先级顺序 

<!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. 默认样式

 

posted @ 2022-04-12 22:46  Bridgebug  阅读(100)  评论(0)  编辑  收藏  举报