05-常用选择器

已注销
38 阅读1分钟

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不要重复 00034.png

<!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>

效果如下 00035.png

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>

00036.png

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>

00040.png

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>

00041.png

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>

00042.png

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>

00043.png

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>

00044.png

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>

00045.png

avatar
文章
阅读
粉丝