简单选择器
-
元素选择器
- 作用：根据标签名来选中指定的元素
- 语法：标签名{}
- 示例：p()、h1{}
-
id选择器
- 作用：根据元素的id属性值选中一个元素
- 语法：#id属性值{}
- 示例：#red{}
-
类选择器
- 作用：根据元素的class属性值，选中一组元素
- 语法：.class属性值{}
- 示例：.blue{}
-
通配选择器
- 作用：选中页面中的所有元素
- 语法：*{}
- 示例：*{}
复合选择器
-
交集选择器
- 作用：选中同时符合多个条件的元素
- 语法：选择器1选择器2选择器3...{}
- 示例：div.red{}
- 注意：如果交集选择器中存在元素选择器，则元素选择器必须开头
-
差集选择器(选择器分组)
- 作用：同时选择多个选择器对应的元素
- 语法：选择器1,选择器2,选择器3{}
- 示例：h1,p,#red,div.red{}
关系选择器
父元素：直接包含子元素的叫做父元素
子元素：直接被父元素包含的叫做子元素
祖先元素：直接或者间接包含后代的元素叫做祖先元素（一个元素的父元素也是他的祖先元素）
后代元素：直接或者间接被祖先元素包含的元素叫做后代元素（子元素也是后代元素）
兄弟元素：拥有相同父元素的元素是兄弟元素
-
子元素选择器
- 作用：选择指定元素的子元素
- 语法：父元素 > 子元素{}
- 示例：div > p > span{}
-
后代元素选择器
- 作用：选择指定父元素的指定后代元素
- 语法：祖先 后代{}
- 示例：div span{}
-
选择下一个兄弟
- 作用：选择指定元素的下一个兄弟元素
- 语法：兄 + 弟{}
- 示例：div + span{}
-
选择后面的所有兄弟
- 作用：选择指定元素后面的所有指定兄弟元素
- 语法：兄 ～ 弟{}
- 示例：div ～ span{}
属性选择器
- [属性名] 选择含有指定属性的选择器
- [属性名=属性值] 选择含有指定属性名和属性值的选择期
- [属性名^=属性值] 选择含有属性名和属性值以指定开头的选择器
- [属性名$=属性值] 选择含有属性名和属性值以指定结尾的选择器
- [属性名*=属性值] 选择含有属性名和属性值含有指定值的选择器
p[class="color"]{
color: red;
}
伪类选择器
伪类就是不存在的类，或者说是特殊的类，它用来描述一个元素的特殊状态，例如第一个元素、被点击的元素、鼠标悬停的元素等。
伪类使用:开头，常见属性如下
- :first-child 第一个子元素
- :last-child 最后一个子元素
- :nth-child(n) 第n个子元素
特殊值：
n：第n个，n的范围为 0 - 无穷大
2n 或even：选中偶数的元素
2n+1 或 odd：选中奇数对元素
注意：1-3，这些值，都是根据所有的子元素进行排序 - :first-of-type
- :last-of-type
- :nth-of-type
4-6这三个元素和上面的类似，区别在于这三个值是根据同类型对元素进行排序 - :not(),表示否定伪类，将复合条件的元素排除在外，例如下面的例子，选中除第一个元素之外的其他元素。
ul > li:not(:first-child){
color: yellowgreen;
}
