css选择器，优先级，样式继承

 CSS选择器
    （1）标签选择器（元素选择器）
      标签选择器又叫元素选择器，使用元素名可以直接选中相同的元素
    （2）类名选择器
      类选择器以.开头，后面紧跟类名 不允许有空格 与元素的class属性值保持一致 一个元素可以有多个class值 每个值之间通过空格分开
    （3）ID选择器
      id选择器以#开头，后面紧跟id名 不允许有空格 与元素的id属性值保持一致
      在一个文档中 id值不能重复 所以这个一般选择唯一元素
   （4）普遍选择器
      使用*来表示普遍选择器 表示选择所有元素 通常用在组合选择器中
      * {
          background-color: honeydew;
        }
      #app>*{
          background-color: honeydew;
        }
    （5）层次选择器

1.  后代选择器

        " "
        #app p 包括子元素，也包括孙子元素，子子孙孙无穷～

     2. 子代选择器

        ">"    表示的是直接子元素
        #app>p
     3. 相邻同胞选择器 下一个兄弟元素
        "+"
        .myP+* 选的是class为myP的元素的下一个兄弟元素
     4. 一般同胞选择器
        "~"
        .myP~*   选的是class为myP的元素的后面的所有兄弟元素
    （6）多选择器
      多个选择器组合使用，用","分割
      1.组合选择器
        div,p,li,.myDiv,#app {
        }
     2. 嵌套选择器
        div.myDiv

    （7）属性选择器
      /* 属性选择器 */
      [title] {
        color: khaki;
      }
      // 属性包含title，属性值为val
      [title=val] {
      color: khaki;
      }
      // 属性包含title，属性值以val开头
      [title^=val] {
      color: khaki;
      }
      // 属性包含title，属性值以val结尾
      [title$=val] {
      color: khaki;
      }
      // 属性包含title，属性值包含val(模糊匹配 只要有这个字符串就行)，在某个单词里面能找到val就可以，不需要单个完整的单词
      [title*=val] {
      color: greenyellow;
      }
      // 属性包含title，属性值中有val(必须是目标字符串)，必须是单个完整的单词val
      [title~=val] {
      color: greenyellow;
      }

      //属性中必须是完整且唯一的单词，或者以 - 分隔开，例如：

        [lang|=en] --> <p lang="en"> <p lang="en-us">

        [lang|="en"] {

                color: red;

        }

    （8）伪类选择器
      子代元素相关
        以:开头，用于其它选择器之后，指明元素在某种情况下才能被选中
        :only-child 独生子元素
        :first-child 第一个孩子元素
        :last-child 最后一个孩子元素 */
        :nth-child(n) 第n个孩子元素 n从1开始
        :nth-last-child(n) 倒数第n个孩子元素 n从1开始
        :first-of-type 选中app类子代的每种类型的第1个孩子元素
        :last-of-type 选中app类子代的每种类型的最后1个孩子元素
        :nth-of-type(n) 选中app类子代的每种类型的第n个孩子元素 n从1开始
        :nth-last-of-type(n) 选中app类子代的每种类型的倒数第n个孩子元素

      元素状态相关的
        :hover
        :link     a标签未被访问过的状态
        :visited  a标签已被访问过的状态
        :active   活动时的状态
        :focus    聚焦时的状态
        :checked  按钮被选中时的状态
        :default  默认选中时的状态
        :enabled  表单项可用时的状态
        :disabled 表单项禁用时的状态
        :valid
        :invalid  通过表单验证和不通过
        :required
        :optional 必填项和选填项
        :in-range
        :out-of-range 在范围内、不在范围内
    （9）伪元素选择器
      "::" 开头 用在其它选择器之后
      ::after           选中之后的不存在的节点，然后结合content添加内容
      ::before          选中之前的不存在的节点，然后结合content添加内容
      ::first-letter    选中第一个文本字符
      ::first-line
      ::selection

    CSS优先级

       总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
      采取就近原则
      外部样式低于内部样式低于行内样式
      
    特性值（只是相对概念）

      style 行内样式表                    1000
      id选择器                            100
      类选择器、属性选择器、伪类选择器         10
      元素选择器和伪元素选择器               1

      color: tomato !important;使用一个 !important 规则时，此声明将覆盖任何其他声明。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

行内样式不能写选择器

  样式继承
      有些规则会被子元素默认继承，有些不会
      会被继承的：font 文本 列表 cursor等
      不会被继承：margin padding border等
      三个特殊的值来改变继承关系
        /* 将可继承的属性改为不继承 */
        color: initial;
        /* 将不继承的属性改为继承 */
        border: inherit;
        /* 跟随默认情况 */
        /* color: unset; */