选择符的优先级
    !important > 行内 style > id > class > 标签 > 通配符 > 浏览器继承

    css 选择符种类
    id、class、标签、属性、通配符

    几个容易混淆的选择器

    1. div > p，控制 div 下面的所有的 p，只是 div 下面的第一级的 p

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4.  <meta charset="UTF-8" />
      5.  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7.  <title>Document</title>
      8.  <style>
      9.    /* 只有 p4 变为红色 */
      10.    .box > p {
      11.      color: red;
      12.    }
      13.  </style>
      14. </head>
      15. <body>
      16.  <div class="box">
      17.    <div>
      18.      <p>p1</p>
      19.      <p>p2</p>
      20.      <div>
      21.        <p>p3</p>
      22.      </div>
      23.    </div>
      24.    <p>p4</p>
      25.  </div>
      26. </body>
      27. </html>

    2. div + p，和 div 处在同一个层级的 且 在 div 后面出现的 第一个 p

    3. div ~ p，和 div 处在同一个级别的 且 在 div 后面出现的 所有的 p
    4. [title ~= flower]，title 属性中 包含 flower 单词的 元素
    5. [lang |= en]，lang 属性中 以 en 开头的