CSS選擇器詳解

阿新 • • 發佈：2021-06-30

CSS選擇器，顧名思義，就是將特定的HTML頁面標籤選擇出來，然後規定相應的CSS樣式。

1. 基礎選擇器

1.1 標籤選擇器

概念：標籤選擇器是指用HTML標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式。

語法：標籤名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ...... }

作用：標籤選擇器可以把某一類標籤全部選擇出來。比如所有的div標籤和所有的 span標籤

優點：是能快速為頁面中同類型的標籤統一樣式

缺點：不能設計差異化樣式。

案例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>舉例</title>
	<style type="text/css">
		p {
			color:green;
			font-size: 32px;
		}
	</style>
</head>
<body>
	<p>標籤選擇器例子</p>
</body>
</html>

1.2 類選擇器

概念： 類選擇器是指用在標籤中指定的class屬性值作為選擇器，按class值分類，為頁面中相同class值的標籤指定統一的CSS樣式。

語法： .class值 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ...... } （一定要注意在class名之前有一個小點兒“ . ”）

作用：類選擇器可以把某一類標籤再次按照class值進行分類選擇出來。

優點：在指定統一樣式的時候，不受限於不同的標籤種類，只要是有相同的類名就可以指定相同的CSS樣式；而且複用性較高，可以設計差異化樣式。

缺點：適用範圍廣沒有明顯缺點，相較於id選擇器，優先順序較低。同時適用兩種選擇器的標籤，衝突項按照id選擇器樣式

案例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>舉例</title>
	<style type="text/css">
		.class1 {
			color:green;
			font-size: 32px;
		}
		.class2 {
			color:red;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<div class="class1">千山鳥飛絕</div>
	<div class="class2">萬徑人蹤滅</div>
	<div class="class1">孤舟蓑笠翁</div>
	<div class="class2">獨釣寒江雪</div>
</body>
</html>

1.3 id選擇器

概念： id選擇器是指用在標籤中指定的id值作為選擇器，按id值進行分類。id值唯一，可以針對單一的標籤進行指定樣式。

語法： #id值 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ...... } （一定要注意在id名之前有一個小點兒“ # ”）

作用：id選擇器可以指定某一個標籤，將標籤指定CSS樣式。id值唯一，不可複用。

優點：id選擇器優先順序較高，對於需要進行個性化樣式的標籤可以進單獨指定樣式；需要對單個標籤進行指令碼操作時，使用id更高效

缺點：可以進行個性化指定樣式，但是可複用性很差。

案例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>舉例</title>
	<style type="text/css">
		#id1 {
			color:green;
			font-size: 32px;
		}
		#id2 {
			color:red;
			font-size: 32px;
		}
		#id3 {
			color:blue;
			font-size: 32px;
		}
		#id4 {
			color:pink;
			font-size: 32px;
		}
	</style>
</head>
<body>
	<div id="id1">千山鳥飛絕</div>
	<div id="id2">萬徑人蹤滅</div>
	<div id="id3">孤舟蓑笠翁</div>
	<div id="id4">獨釣寒江雪</div>
</body>
</html>

1.4 萬用字元選擇器

概念： 萬用字元選擇器，顧名思義對於所有的元素都適用，都可以指定樣式。

語法： * {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ...... }

優點：在對於可以全域性通用的樣式進行指定使用，較為高效

缺點：範圍過於廣，所有元素適用，不經常使用。

案例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>舉例</title>
	<style type="text/css">
		* {
			color:green;
			font-size: 32px;
		}
	</style>
</head>
<body>
	<div id="id1">千山鳥飛絕</div>
	<div id="id2">萬徑人蹤滅</div>
	<span>孤舟蓑笠翁</span>
	<span>獨釣寒江雪</span>
</body>
</html>

2. 複合選擇器

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

2.1 後代選擇器

概念：後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代（子元素以及子元素的子元素）。

語法： 父級後代級 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ...... } 把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔

作用：內層標籤（後代級）就成為外層標籤（父級）的後代。子孫後代都可以這麼選擇，不必須是子級。或者說，它能選擇任何包含在內的標籤。

案例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>舉例</title>
	<style type="text/css">
		tr a {
			color:green;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th>絕句</th>
		</tr>
		<tr>
			<td>千山鳥飛絕，</td>
		</tr>
		<tr>
			<td><a href="#">萬徑人蹤滅。</a></td>
		</tr>
		<tr>
			<td>孤舟蓑笠翁，</td>
		</tr>
		<tr>
			<td>獨釣寒江雪。</td>
		</tr>
	</table>
</body>
</html>

2.2 子元素選擇器

概念：子元素選擇器只能選擇作為某元素子元素的元素，只能選擇關聯直接上下級的標籤元素。

語法： 父級 > 子級 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ...... } 連線符號兩邊有空格

作用：父級標籤與自己標籤之間是直接關聯的，即父與子的關係，樣式只能指定是對應父子級的標籤元素，必須是子級。

案例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>舉例</title>
	<style type="text/css">
		tr th {
			color:red;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th>絕句</th>
		</tr>
		<tr>
			<td>千山鳥飛絕，</td>
		</tr>
		<tr>
			<td>萬徑人蹤滅。</td>
		</tr>
		<tr>
			<td>孤舟蓑笠翁，</td>
		</tr>
		<tr>
			<td>獨釣寒江雪。</td>
		</tr>
	</table>
</body>
</html>

2.3 交集選擇器

概念：交集選擇器由兩個選擇器構成，找到的標籤必須滿足：既有標籤一的特點，又有標籤二的特點。

語法：A選擇器B選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ...... } 兩個選擇之間沒有空格；適用標籤、class、id選擇器

作用：給所有選擇器選中的標籤中, 相交的那部分標籤設定屬性。使用場景並不多。

案例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>舉例</title>
	<style type="text/css">
		td.class1 {
			color:red;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th>絕句</th>
		</tr>
		<tr>
			<td>千山鳥飛絕，</td>
		</tr>
		<tr>
			<td>萬徑人蹤滅。</td>
		</tr>
		<tr>
			<td class="class1">孤舟蓑笠翁，</td>
		</tr>
		<tr>
			<td>獨釣寒江雪。</td>
		</tr>
	</table>
</body>
</html>

2.4 並集選擇器

概念：並集選擇器由多個選擇器構成，並集的標籤都會被賦予指定的樣式。

語法： A選擇器,B選擇器，...... {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ...... } 選擇器之間使用逗號隔開

作用：如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的CSS樣式。就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。

案例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>舉例</title>
	<style type="text/css">
		th,.class1 {
			color:red;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th>絕句</th>
		</tr>
		<tr>
			<td>千山鳥飛絕，</td>
		</tr>
		<tr>
			<td>萬徑人蹤滅。</td>
		</tr>
		<tr>
			<td class="class1">孤舟蓑笠翁，</td>
		</tr>
		<tr>
			<td>獨釣寒江雪。</td>
		</tr>
	</table>
</body>
</html>

2.5 連結偽類選擇器

概念：偽類選擇器用於向某些選擇器新增特殊的效果。連結偽類選擇器較為常用，給連結新增特殊效果。

語法：偽類用 2個點就是冒號進行表示比如 :link{}

連結偽類選擇器舉例：

a:link /* 未訪問的連結 */
a:visited /* 已訪問的連結 */
a:hover /* 滑鼠移動到連結上 */
a:active /* 選定的連結 */
注意：寫的時候，順序儘量不要顛倒，按照 lvha 的順序。否則可能會引起錯誤。

a {   /* a是標籤選擇器  所有的連結 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover 是連結偽類選擇器 滑鼠經過 */
			color: red; /*  滑鼠經過的時候，由原來的 灰色 變成了紅色 */
}