CSS——組合選擇器

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;
}