一、簡介

CSS組合選擇符，也被稱為復合選擇器，是在 CSS3 中定義的一類規(guī)則，用于通過結(jié)合不同的選擇器來更加精確地定位和設置樣式。其主要的組合方式包括后代選擇器、子元素選擇器、相鄰兄弟選擇器和普通兄弟選擇器。

二、CSS組合方式

CSS組合選擇符包括各種簡單選擇符的組合方式。在 CSS中包含了四種組合方式：

1、后代選取器(以空格分隔)；

2、子元素選擇器(以大于號分隔）；

3、相鄰兄弟選擇器（以加號分隔）；

4、普通兄弟選擇器（以波浪號分隔）。

三、后代選取器

使用空格分隔多個選擇器，用于匹配A選擇器后代元素中的B選擇器所指向的元素。

例如，選取所有 <p> 元素插入到 <div> 元素中：

div p
{
background-color:yellow;
}

四、子元素選擇器

以大于號”>”分隔兩個選擇器，用于選取某個元素的直接子元素。

以下實例選擇了<div>元素中所有直接子元素 <p>：

div>p
{
background-color:yellow;
}

五、相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）以加號”+”分隔兩個選擇器，用于選取緊跟在前一個元素后的元素。

以下實例選取了所有位于 <div> 元素后的第一個 <p> 元素：

div+p
{
background-color:yellow;
}

五、普通相鄰兄弟選擇器

普通兄弟選擇器選取所有指定元素的相鄰兄弟元素。以波浪號”～”分隔兩個選擇器，用于選取所有符合這兩個選擇器的元素，不論它們是否相鄰。

以下實例選取了所有 <div> 元素之后的所有相鄰兄弟元素 <p> ：

div~p
{
background-color:yellow;
}