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

.c1 .c2{
            color: red;
        }

　　

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

.c3 > .c5{
            color: red;
        }

　　

3、与选择器

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

p.c1{
            color: red;
        }

 

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

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

　　

5、兄弟选择器

（1）相邻兄弟选择器

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

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

　　

（2）通用兄弟选择器

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

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