html+css 选择器优先级

news2025/4/9 2:12:57

1.基本选择器优先级

id>class>tagname(标签选择器)>*(通配符选择器)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本选择器的优先级</title>
  <style type="text/css">
   #id3{color:yellow;}
   h3{color:red!important;}
   #id3{color:black;}
   .green{color:green;}
  </style>
</head>
<body>
  <h3 class="green" id="id3">同时应用三种选择器所定义样式的h3标题文字</h3>
</body>
</html>

效果图

注：！important提高样式表的优先级（最高）

2.多元素组合选择器的优先级

控制对象的精准度>id个数>class个数>tagname个数>后定义覆盖前定义

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本选择器的优先级</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  #wrap-1{
    width:600px;
    margin:20px auto;
  }
  li{list-style:none;}
  a{text-decoration:none;}
  #wrap-1 ul.list p #text-1{        /*两个id,一个class，两个tagname*/
    color:blue;
  }
  #wrap-1 .list #box-1 span{       /* 两个id，一个class，一个tagname*/
    color:red;
    font-size:30px;
  }
  span{color:green;}                 /*一个tagname*/
  </style>
</head>
<body>
  <div class="wrap" id="wrap-1">
    <ul class="list">
      <li id="list-1">
        <p class="box" id="box-1">
          <span class="text" id="text-1">
            多元素组合选择器所影响最内层的文字
          </span>
        </p>
      </li>
    </ul>
  </div>
</body>
</html>

效果图