05-常用選擇器

村里唯一的运维發表於2024-06-11

01 標籤選擇器

一般用來給所有元素做一些通用性的設定(效率比較低,儘量不要使用)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div, p, h2, span {
         color: white;
         background-color: orange;
      }
   </style>
</head>
<body>
   <div>div元素</div>
   <p>p元素</p>
   <div>
      <h2>h2元素</h2>
      <p>p元素  <span>span元素</span></p>
   </div>
</body>
</html>

02 簡單選擇器

在同一個HTML文件中,同一個id不要重複
image

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div {
         color: red;
      }
      .box2 {
         color: green;
      }
      #box3 {
         color: orange;
      }
   </style>
</head>
<body>
   <div>box1</div>
   <div class="box2">box2</div>
   <div id="box3">box3</div>
</body>
</html>
image

03 屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      [title] {
         background-color: orange;
      }
      [title="box3"] {
         background-color: red;
      }
   </style>
</head>
<body>
   <div title>box2</div>
   <div title="box3">box3</div>
</body>
</html>

04 後代選擇器

4.1 所有後代

選擇器之間用空格分割

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box1 span {
         color: red;
      }
   </style>
</head>
<body>
   <div class="box1">
      <div>
         <span>我是span元素1</span>
      </div>
   </div>
   <div class="box1">
      <div>
         <span>我是span元素2</span>
      </div>
   </div>
</body>
</html>
image

4.2 直接子代

使用>連線

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box1 > span {
         color: red;
      }
   </style>
</head>
<body>
   <div class="box1">
      <span>直接子帶span元素</span>
      <div>
         <span>我是span元素1</span>
      </div>
   </div>
   <div class="box2">
      <div>
         <span>我是span元素2</span>
      </div>
   </div>
</body>
</html>
image

05 兄弟選擇器

5.1 相鄰兄弟選擇器

使用+連線

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one + div {
      color: red;
    }
  </style>
</head>
<body>
  <div class="one">123</div>
  <div>456</div>
  <div>789</div>
</body>
</html>
image

5.2 普遍兄弟選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one ~ div {
      color: red;
    }
  </style>
</head>
<body>
  <div class="one">123</div>
  <div>456</div>
  <div>789</div>
</body>
</html>
image

06 選擇器組

6.1 交集選擇器

同時符合2個條件
一般用於精準的選擇某一個元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div.box {
         color: red;
      }
   </style>
</head>
<body>
   <div class="box">測試</div>
   <div>測試1</div>
</body>
</html>
image

6.2 並集選擇器

用 "逗號"分隔
一般用於給多個元素設定相同的樣式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      p, div {
         color: red;
      }
   </style>
</head>
<body>
   <p>p元素</p>
   <div>測試1</div>
</body>
</html>
image

相關文章