CSS选择器

类型：

标签选择器、类名选择器、id 选择器、普遍选择器、层次选择器、多选择器、属性选择器、伪类选择器..

标签选择器：使用元素名可以直接选中相同的元素

类名选择器：以 . 开头，紧跟类名，不允许有空格，与元素class属性值保持一致

id 选择器：id选择器以"#"开头，后面紧跟一个id名，不允许有空格，与元素id属性值保持一致

普遍选择器：使用*来表示普遍选择器 表示选择所有元素

层次选择器：

    后代选择器：

      后代选择器
        " " 
        #app p  包括子元素，也包括孙子元素  

      子代选择器
        ">"   表示的是直接子代元素

      相邻同胞选择器  下一个兄弟元素
        "+"
        .myp+*  选的是class为myp的元素的下一个兄弟元素
      一般同胞选择器
        "~"
        .myp~*  选的是class为myp的元素的后面所有兄弟元素 

多选择器：多个选择器组合使用，用"," 分割

属性选择器：属性+属性值
      [title^=di]     以属性包含titl，属性值以 di开头
      [title$=div]   属性包含title，属性值以 div结尾
      [title*=div]   属性包含title，属性值包含 div（模糊匹配 只要有字符串就行）
      [title~=div]   属性包含title，属性值中有 div（必须是目标字符）

伪类选择器：

选中app类下面的独生子元素 

        .app>*:only-child{

            color: teal; } 

选中app类子代的第一个元素

         .app>*:first-child{

            color: teal;}

选中app类最后一个元素 

         .app>*:last-child{

            color: teal; 

选中app类子代的第n个元素 n从1开始

        .app>*:nth-child(n){

            color: teal; 

选中app类子代的倒数第几个元素

       .app>*:nth-last-child(3){

            color: teal;

选中app类子代的每种类型的第一个孩子元素

           .app>*:first-of-type{

            color: teal;

选中app类子代的每种类型的最后一个孩子元素

            .app>*:last-of-type{

            color: teal; 

选中app类子代的每种类型的第n个孩子元素  n从1开始

           .app>*:nth-of-type(n){

            color: teal;

选中app类子代的每种类型的倒数第n个孩子元素

            .app>*:nth-last-of-type(n){

            color: teal;

元素状态相关的
      :hover   光标悬浮
      :link  a标签未被访问过的状态
      :visited   a标签已被访问过的状态
      :active   活动时的状态
      :focus  聚焦时的状态
      :checked  按钮被选中时的状态
      :default  默认选中时的状态
      :enable   表单可用时的状态
      :disabled  表单禁用时的状态
      :valid    通过验证
      :invalid  不通过验证
      :required
      :option   必填项和选填项
      :in-range
      :out-of-range  在范围内和不在范围内