选择器

简单选择器

1. 元素选择器

   1. 作用：根据标签名来选中指定的元素
   2. 语法：标签名{}
   3. 示例：p()、h1{}

2. id选择器

   1. 作用：根据元素的id属性值选中一个元素
   2. 语法：#id属性值{}
   3. 示例：#red{}

3. 类选择器

   1. 作用：根据元素的class属性值，选中一组元素
   2. 语法：.class属性值{}
   3. 示例：.blue{}

4. 通配选择器

   1. 作用：选中页面中的所有元素
   2. 语法：*{}
   3. 示例：*{}

复合选择器

5. 交集选择器

   1. 作用：选中同时符合多个条件的元素
   2. 语法：选择器1选择器2选择器3...{}
   3. 示例：div.red{}
   4. 注意：如果交集选择器中存在元素选择器，则元素选择器必须开头

6. 差集选择器(选择器分组)

   1. 作用：同时选择多个选择器对应的元素
   2. 语法：选择器1,选择器2,选择器3{}
   3. 示例：h1,p,#red,div.red{}

关系选择器

父元素：直接包含子元素的叫做父元素
子元素：直接被父元素包含的叫做子元素
祖先元素：直接或者间接包含后代的元素叫做祖先元素（一个元素的父元素也是他的祖先元素）
后代元素：直接或者间接被祖先元素包含的元素叫做后代元素（子元素也是后代元素）
兄弟元素：拥有相同父元素的元素是兄弟元素

7. 子元素选择器

   1. 作用：选择指定元素的子元素
   2. 语法：父元素 > 子元素{}
   3. 示例：div > p > span{}

8. 后代元素选择器

   1. 作用：选择指定父元素的指定后代元素
   2. 语法：祖先 后代{}
   3. 示例：div span{}

9. 选择下一个兄弟

   1. 作用：选择指定元素的下一个兄弟元素
   2. 语法：兄 + 弟{}
   3. 示例：div + span{}

10. 选择后面的所有兄弟

    1. 作用：选择指定元素后面的所有指定兄弟元素
    2. 语法：兄 ～ 弟{}
    3. 示例：div ～ span{}

属性选择器

1. [属性名] 选择含有指定属性的选择器
2. [属性名=属性值] 选择含有指定属性名和属性值的选择期
3. [属性名^=属性值] 选择含有属性名和属性值以指定开头的选择器
4. [属性名$=属性值] 选择含有属性名和属性值以指定结尾的选择器
5. [属性名*=属性值] 选择含有属性名和属性值含有指定值的选择器

p[class="color"]{
    color: red;
}

伪类选择器

伪类就是不存在的类，或者说是特殊的类，它用来描述一个元素的特殊状态，例如第一个元素、被点击的元素、鼠标悬停的元素等。
伪类使用:开头，常见属性如下

1. :first-child 第一个子元素
2. :last-child 最后一个子元素
3. :nth-child(n) 第n个子元素
   特殊值：
   n：第n个，n的范围为 0 - 无穷大
   2n 或even：选中偶数的元素
   2n+1 或 odd：选中奇数对元素
   注意：1-3，这些值，都是根据所有的子元素进行排序
4. :first-of-type
5. :last-of-type
6. :nth-of-type
   4-6这三个元素和上面的类似，区别在于这三个值是根据同类型对元素进行排序
7. :not(),表示否定伪类，将复合条件的元素排除在外，例如下面的例子，选中除第一个元素之外的其他元素。

ul > li:not(:first-child){
   color: yellowgreen;
}