CSS3选择器

1、属性选择器

  1、[属性名] ：选择所有带有这个属性名的元素。      如：[src]
  2、[属性名=属性值] ：选择所有属性=这个属性值的元素   如：[target=_self]   
  3、[src^="https"] ：选择src以http开头的元素。
  4、[src$=".pdf"] :选择src以。pdf结尾的元素。
  5、[class *='x'] :选择类名中包含x的元素

2、伪类选择器

  1、li:nth-child(3) {}   ：选择li中第三个li元素（先找父元素然后再找子元素）。这个会因为第三个元素是别的标签而受到影响。
  2、li:nth-of-type(3) {}  ：选择li中第三个li元素  。这不会因为第三个元素是别的元素而受影响。

  3、:nth-last-child(5){}   ：倒着数去选择第五个元素。
  4、:nth-last-of-type(5){} ：倒着数去选择第五个元素。（不会受影响）   
  
  5、:last-child ：指定元素是其父级的最后一个子级。
  6、:first-child：指定元素是其父级的第一个子级的样式

3、为元素选择器

  1、:before  ：在元素前加内容
    p::before {
        content: '我是伪元素的before添加的内容';
        color: green;
    }

  2、:after  :在元素后面加内容
   p::after {
        content: '我是伪元素的after添加的内容';
        color: fuchsia;
    }

  3、:first-line  ：选择元素的第一行、
    p::first-line {
        background-color: grey;
    }

  4、:first-letter ：选择元素的第一个字进行操作
   p::first-letter {
        background-color: red;
    }

4、E[attr]

   1、用于选取带有指定属性的元素

    选择了.demo下所有带有id属性的a元素 
      .demo a[id] {
       }
  2、也可以使用多属性进行选择元素。

  选择了.demo下同时拥有href和title属性的a元素
  .demo a[href][title] {
  }

5、E[attribute~=value]

  用于选取属性值中包含指定词汇的元素。同上面的完全匹配不同，这个只要属性值中有 value 就相匹配。
  /** 可以匹配到元素 **/、

  a[class~="links"] {
  }
  <a href="" class="links item">hangge.com</a>