css 选择器优先级css选择器优先级 css 选择器都有权重值，权重值越大优先级越高内联样式表权重值最高：值为10

css选择器优先级

css 选择器都有权重值，权重值越大优先级越高

内联样式表权重值最高：值为1000
id选择器的权重值为100
class的权重值为10
类型（元素）选择器
通配符选择的优先级为0
当权值相等时，后定义的样式表要优先于定义的样式表
在同一组属性设置中表有 important 规则的优先级最大

后代选择器

css 后代选择器指为某标签元素内的特定后代标签元素来定义其样式，在css后代选择器中，规则左边的选择器一端包含两个或者多个用空格符分隔得选择器，选择器中得空格是一种结合符

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>
  <style>
    .ancestor {
      width: 500px;
      height: 300px;
    }

    .parent {
      width: 300px;
      height: 200px;
    }

    .child {
      width: 200px;
      height: 100px;
    }

    /* 
      定位的是 .ancestor 的后代为 div 的元素
      * 后代选择器包含该元素中所有包裹的元素
     */
    .ancestor div {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="ancestor">
    this is ancestor.
    <div class="parent">
      this is parent.
      <div class="child">this is child.</div>
    </div>
  </div>
</body>

</html>

子选择器

css子选择器指为某标签元素的子元素来定义其样式，这里的子元素仅指第一级后代元素，css子选择器使用了符合大于(>),即子结合符

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子级选择器</title>
  <style>
    .ancestor {
      width: 500px;
      height: 300px;
    }

    .parent {
      width: 300px;
      height: 200px;
    }

    .child {
      width: 200px;
      height: 100px;
    }

    /*
      定位的是 .ancestor 的子级为 div 的元素
    */
    .ancestor>div {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="ancestor">
    this is ancestor.
    <div class="parent">
      this is parent.
      <div class="child">this is child.</div>
    </div>
  </div>
</body>

</html>

相邻兄弟选择器

CSS相邻兄弟选择器指可选择紧接在另一元素后的元素，且二者有相同的父元素。相邻兄弟选择器使用”加号（+）“作为相邻兄弟结合符

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相邻兄弟选择器</title>
  <style>
    .ancestor {
      width: 500px;
      height: 300px;
    }

    .parent {
      width: 300px;
      height: 200px;
    }

    .child {
      width: 200px;
      height: 100px;
    }

    /* 定位的是 .child1 的后面相邻兄弟为 div 的元素 */
    .child1+div {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="ancestor">
    this is ancestor.
    <div class="parent">
      this is parent.
      <div class="child0">this is child0.</div>
      <div class="child1">this is child1.</div>
      <div class="child2">this is child2.</div>
    </div>
  </div>
</body>

</html>

普通兄弟选择器

CSS普通兄弟选择器指可选择紧接在另一元素后的所有元素，且二者有相同的父元素。普通兄弟选择器使用”波浪号（~）“作为普通兄弟结合符。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>普通兄弟选择器</title>
  <style>
    .ancestor {
      width: 500px;
      height: 300px;
    }

    .parent {
      width: 300px;
      height: 200px;
    }

    .child {
      width: 200px;
      height: 100px;
    }

    /* 定位的是 .child1 的后面兄弟为 div 的元素 */
    .child1~div {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="ancestor">
    this is ancestor.
    <div class="parent">
      this is parent.
      <div class="child0">this is child0.</div>
      <div class="child1">this is child1.</div>
      <div class="child2">this is child2.</div>
      <div class="child3">this is child3.</div>
    </div>
  </div>
</body>

</html>

并集选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>并集选择器</title>
  <style>
    /* 要求为 <h1> ~ <h6> 元素的文本内容设置相同颜色 */
    /* h1 {
      color: lightcoral;
    }

    h2 {
      color: lightcoral;
    }

    h3 {
      color: lightcoral;
    }

    h4 {
      color: lightcoral;
    }

    h5 {
      color: lightcoral;
    }

    h6 {
      color: lightcoral;
    } */
    /* 通过并集选择器进行改写 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: lightcoral;
    }
  </style>
</head>

<body>
  <h1>标题一</h1>
  <h2>标题二</h2>
  <h3>标题三</h3>
  <h4>标题四</h4>
  <h5>标题五</h5>
  <h6>标题六</h6>
</body>

</html>

交集选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交集选择器</title>
  <style>
    p {
      color: lightcoral;
    }

    .cls {
      color: lightskyblue;
    }

    /* 交集选择器 */
    p.cls {
      color: magenta;
    }
  </style>
</head>

<body>
  <p>18级启嘉班</p>
  <p class="cls">19级启嘉班</p>
  <p>20级启嘉班</p>
  <div class="cls">启嘉网</div>
</body>

</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器</title>
  <style>
    button:hover {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <button>按钮</button>
</body>

</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>before和after伪元素</title>
  <style>
    p::before {
      content: "♥";
    }

    p::after {
      content: "♥";
    }
  </style>
</head>

<body>
  <p>19级启嘉班</p>
</body>

</html>

css 选择器优先级