複合選擇器是由兩個或讀個基礎選擇器，通過不同的方式組合成的，目的是為了可以選擇更準確的目標元素。

一、交集選擇器

例如：

<div class="orange">I am P1</div>
<p class="orange">I am P2</p>

.orange {
	color: orange;
}
p.orange {
	font-size: 40px;
}

效果是：

p.orange {
	font-size: 40px;
}

這段程式碼的p.orange{}就是交集選擇器, 中間沒用空格。

圖解：

二、並集選擇器

並集選擇器是各個選擇器通過逗號連線而成的，任何形式的選擇器，都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以使用並集選擇器、

語法：

例如：

<div>I am P1</div>
<p>I am P2</p>

div,
p {
	color: orange;
}

效果：

圖解：

三、後代選擇器

後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代。其寫法就是把外層標籤寫在前面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。

例如：

<p>I am P1</p>
<div>
	<p>I am P2</p>
</div>

p {
	color: skyblue;
}

div p {
	font-size: 40px;
}

效果展示：

圖解：

四、子元素選擇器

子元素選擇器只能選擇作為其元素子元素的元素。其寫法就是父親標籤寫在前面，子級標籤寫在後面，中間跟一個“>”進行連線,注意，符號左右兩側各保留一個空格。

例如：

<ul class="nav">
	<li> 一級選單
		<ul>
			<li>二級選單</li>
			<li>二級選單</li>
			<li>二級選單</li>
		</ul>
	</li>
</ul>
 

.nav > li {
	color: skyblue;
}

效果是：

但是樣式為：

.nav li {
	color: red;
}
.nav > li {
	color: skyblue;
}

效果卻是這樣：

像第二個樣式，子級元素選擇器會覆蓋後代選擇器，但是隻覆蓋了一級選單（.nav的兒子）。

五、屬性選擇器

例如：

<a href="#" title="aa">百度</a>
<a href="#" title="bb">新浪</a>
<a href="#">jj</a>
<a href="#">yy</a>
<a href="#">xx</a>

a[title] {
	color: skyblue;
}

又例如：

<input type="text" value="輸入">
<input type="text" value="輸入">
<input type="text" value="輸入">
<input type="submit">
<input type="reset">
<input type="button" value="按鈕">

input[type="text"]{
	color: red;
}

此時屬性均為type，那麼選出文字框進行新增樣式，就如上選擇，效果展示：

對於後面三個，就是，選擇屬性值具有相同的字元（可以不完全相等），進行新增樣式。如，對於第四個，有class="font12"，class="font22"，class="font32"，這三個class的屬性值的首幾個字母均為“font”，這樣就可以通過 標籤名（如div）, div[class^=font]{ color:red;} 進行設定樣式。其他兩個類似。

六、偽類選擇器

1. E::first-letter文字的第一個單詞或字

2. E::first-line文字的第一行

3. E::selection可改變選中文字的樣式

注意：“：”一個冒號是偽類選擇器，“::”兩個冒號是偽元素選擇器。

對於第三個，效果是如下圖：

當滑鼠對文字進行選擇的時候，實現E::selection的樣式。

4. E::before和E::after（△重要）

在E元素內部的開始位置和結束位置建立一個元素，該元素為行內元素，且必須結合content屬性使用。

div::before {
	content: "開始";
}
div::after {
	content: "結束";
}

如：

<div>今年</div>

div::before {
	content: "我";
}
div::after {
	content: "18歲";
}

效果如下：

第二個圖表示插入的文字在div裡。