小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

CSS选择器优先级

（1）CSS选择器都有权重值，权重值越大优先级越高。

内联样式表的权重值最高，值为1000。
id选择器的权重值为100。
class选择器的权值为10。
类型（元素）选择器的优先级为1。
通配符选择器的优先级为0。

（2）当权值相等时，后定义的样式表要优于先定义的样式表。

（3）在同一组属性设置中表有 “!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>

伪类选择器

用来表示定位元素的某种状态所显示的样式

语法: ":关键字"

例如 :hover

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

参考：developer.mozilla.org/en-US/docs/…

否定伪类选择器

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>否定伪类选择器</title>
  <style>
    .fancy {
      text-shadow: 2px 2px 3px gold;
    }

    p:not(.fancy) {
      color: green;
    }

    body :not(p) {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <p>我是一个段落。</p>
  <p class="fancy">我好看极了！</p>
  <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>
    .p1::first-line {
      color: lightcoral;
    }

    .p2 span {
      color: lightcoral;
    }
  </style>
</head>

<body>
  <p class="p1">19级启嘉班Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, ratione at labore blanditiis
    tempora
    quibusdam, maxime veritatis, ex incidunt et aliquid. Hic incidunt tempore sit alias ullam ut numquam odio.</p>
  <p class="p2"><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quod</span> aspernatur
    repudiandae nisi ex
    minus repellendus corrupti labore, iste dolores, accusamus aperiam quaerat reiciendis quia soluta corporis!
    Temporibus, quia sapiente!</p>
</body>

</html>

参考：developer.mozilla.org/en-US/docs/…

before和after伪元素

在CSS中， **::before**创建一个伪元素，该元素是所选元素的第一个子元素。

在CSS中， **::after**创建一个伪元素，该元素是所选元素的最后一个子元素。

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

参考：:: before（：before）

参考：::after (:after)

first-letter伪元素

样式的第一行的第一个字母块级元素，但仅当没有被其它内容（例如图像或内联表）之前。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>first-letter伪元素</title>
  <style>
    p::first-letter {
      color: lightcoral;
    }
  </style>
</head>

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

</html>

参考：:: first-letter（：first-letter）

selection伪元素

样式已经强调了用户（如点击和整个文本拖动鼠标）文档的一部分。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>selection伪元素</title>
  <style>
    p::selection {
      background-color: #000;
      color: #fff;
    }
  </style>
</head>

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum possimus ipsa dolores neque odit, blanditiis
    accusantium libero nihil dolore porro facere, amet doloribus eum fuga. Delectus, dignissimos nam! Similique, harum?
  </p>
</body>

</html>

参考：::selection

CSS选择器及优先级