css奇数偶数选择器 css所有标签及其属性汇总( 二 ) _知识分享

用的最多的交集选择器是：元素选择器配合类名选择器，例如上面例子中 h2.backend

2.2 复合选择器-并集选择器并集选择器的作用是选中多个选择器对应的元素，又称分组选择器。所谓并集就是或者的含义，通俗理解：要么…要么
语法：
选择器1,选择器2,选择器3,选择器n {属性名: 属性值;}举例：

文章插图
并集选择器
最终效果：

文章插图
最终效果
并集选择器有这些注意事项：

并集选择器一般竖着写；
任何形式的选择器，都可以作为并集选择器的一部分；
并集选择器，通常用于集体声明，可以缩小样式表体积。

2.3 复合选择器-后代选择器后代选择器的作用是选中指定元素中，符合要求的后代元素。
语法：
选择器1 选择器2 选择器3 选择器n {属性名: 属性值;}举例：

文章插图
后代选择器
最终效果：

文章插图
最终效果
后代选择器有几个注意事项：

后代选择器，最终选择的是后代，不会将过程中的祖先一起选中；
儿子、孙子、重孙子，都算是后代；
结构一定要复合的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6。

2.4 复合选择器-子代选择器子代选择器的作用是选中指定元素中符合要求的子元素（儿子元素）。
【css奇数偶数选择器 css所有标签及其属性汇总】语法：
选择器1>选择器2>选择器3>... 选择器n {属性名: 属性值;}举例：

文章插图
子代选择器
最终效果：

文章插图
最终效果
子代选择器有以下注意点：

子代选择器，最终选中的是子代，不是父级；
子、孙子、重孙子、重重孙子…统称后代，子就是指儿子。（和后代选择器的区别）

2.5 复合选择器-相邻兄弟选择器相邻兄弟选择器的作用是选中指定元素后，符合条件的相邻兄弟元素。
所谓相邻，就是紧挨着该元素的下一个，可以理解成睡在我下铺的兄弟。
语法：
选择器1+选择器2 {属性名: 属性值;}举例：

文章插图
相邻兄弟选择器
最终效果：

文章插图
最终效果
有一点需要注意，相邻兄弟选择器选择的是下面的兄弟。
2.6 复合选择器-通用兄弟选择器通用兄弟选择器的作用是选中指定元素后，符合条件的所有兄弟元素。可以理解成虽在我下铺的所有兄弟。
语法：
选择器1~选择器2 {属性名: 属性值;}举例：

文章插图
通用兄弟选择器
最终效果：

文章插图
最终效果
也需要注意，通用兄弟选择器选择的是下面的兄弟，和相邻兄弟选择器是一样的。
2.7 复合选择器-属性选择器属性选择器的作用是选中属性符合一定要求的元素。
语法：

# 选中具有某个属性的元素[属性名] {属性名: 属性值;}# 选中包含某个属性，且属性值等于指定值的元素[属性名=\"值\"] {属性名: 属性值;}# 选中包含某个属性，且属性值以指定的值开头的元素[属性名^=\"值\"] {属性名: 属性值;}# 选中包含某个属性，且属性值以指定的值结尾的元素[属性名$=\"值\"] {属性名: 属性值;}# 选中包含某个属性，且属性值包含指定值的元素[属性名*=\"值\"] {属性名: 属性值;}

举例：

文章插图