基本选择器

基本选择器分为四种：

通用选择器
标签选择器
类选择器
ID 选择器

1. 通用选择器

通用选择器是一个星号*，功能类似于通配符，页面中所有元素都会使用该样式。

2. 标签选择器

标签选择器是任意的 HTML 标签名，用于统一设置某种标签的样式。

3. 类选择器

同一样式的元素定义为一类。定义时，类名前面加一个点号. 。

4. ID 选择器

定义与类选择器类似，区别在于：定义时，ID 前面加一个＃号。

优先级由高到低分别为：ID 选择器 > 类选择器 > 标签选择器 > 通用选择器

代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style type="text/css">
    *{/* 通用选择器 */
      border:1px solid green;
      width:300px;
    }
    
    div{/* 标签选择器 */
      color:red;
    }
    
    .style1{/* 类选择器 */
      font-family:幼圆;
      font-size:32px;
    }
    
    #div3{/* ID选择器 */
      font-size:12px;
    }
  </style>
</head>
<body>
  <p>标签1</p>
  <p class="style1">标签2</p>
  
  <h2>二级标题1</h2>
  <h2 class="style1">二级标题2</h2>
  
  <div>div1</div>
  <div class="style1">div2</div>
  <div id="div3">div2</div>
</body>
</html>

效果演示：

组合选择器

组合选择器分为五种：

多元素选择器
后代选择器
子元素选择器
相邻兄弟选择器
普通兄弟选择器

1. 多元素选择器

多元素选择器允许一次定义多个选择器的样式，选择器之间使用逗号, 隔开。

2. 后代选择器

用于定义某一元素的所有后代的样式。不是该元素后代，则保持原有样式。

3. 子选择器

用于选取某个元素的直接子元素（间接元素不适用）。父子元素之间使用大于号> 隔开。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style type="text/css">  
    time,label{/* 多元素选择器 */
      color:blue;
    }
    
    .box1 p{/* 后代选择器 */
      width:300px;
      border:solid 1px red;
      color:red;
    }
    
    .box2>p{/* 子元素选择器 */
      width:300px;
      border:solid 1px orange;
      color:orange;
    }
  </style>
</head>
<body>
  <time>时间</time><br />
  
  <label>标签1</label>
  <label>标签2</label>
  
  <div class="box1">
    <p>p1</p>
    <div>
      <p>p2</p>
    </div>
    <p>p3</p>
  </div>
  
  <div class="box2">
    <p>p1</p>
    <div>
      <p>p2</p>
    </div>
    <p>p3</p>
  </div>

</body>
</html>

效果演示：

4. 相邻兄弟选择器

用于选择紧邻在某元素之后的兄弟元素。相邻兄弟元素之间使用加号+ 隔开。

selector11 + selector2 + ...{
  ...
}

5. 普通兄弟选择器

用于选择拥有相同父类的元素。选择器之间使用波浪号~ 隔开。

selector11 ~ selector2 ~ ...{
  ...
}

属性选择器

根据属性的某些特点筛选元素，设置其样式。

属性选择器分为：

存在选择器
相等选择器
包含选择器
连接字符选择器
前缀选择器
子串选择器
后缀选择器

选择器类型	语法	示例	描述
存在选择器			所有带有 alt 属性的图像都会应用该样式。
相等选择器			class="warning" 的 <p> 元素都会应用该样式。
包含选择器			class 属性中包含独立单词 "important" 的元素都会应用该样式。
连字符选择器			文件名等于 figure 或以 figure- 开头(figure.jpg、figure-1.jpg) 的 <img>元素都会应用该样式。
前缀选择器			文件名以 "logo" 开头(logo1.jpg、logo2.jpg) 的 <img>元素都会应用该样式。
子串选择器			对指向 W3School 的所有链接应用该样式（href="https://www.w3school.com.cn/html/index.asp"）。
后缀选择器			".jpg" 类型的(logo1.jpg、logo2.jpg) 的 <img>元素都会应用该样式。