CSS——组合选择器

1、后代选择器（包括儿子和孙子）

?

1 2 3

.c1 .c2{             color: red;         }

　　

2、子代选择器（只选择儿子）

?

1 2 3

.c3 > .c5{             color: red;         }

　　

3、与选择器

选择p标签下面的.c1的标签：

?

1 2 3

p.c1{             color: red;         }

 

4、或选择器（同时选择）

?

1 2 3

p.c1,#i1{            color: red;        }

　　

5、兄弟选择器

（1）相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素。

?

1 2 3 4

h1 + p {     color: blue;     font-size: 18px; }

　　

（2）通用兄弟选择器

通用兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素。

?

1 2 3 4

h1 ∼ p {     color: blue;     font-size: 18px; }