1、什麼是CSS選擇器？

　　CSS選擇器，目的是指定CSS要作用的標籤物件，今天來了解一下CSS的基本選擇器和擴充套件選擇器。

2、基本選擇器

這裡介紹四種基本選擇器。

　　（1）標籤選擇器（這個時候的css程式碼以html標籤來決定作用於誰）

<span style="font-size:14px;">			/*
			 * 標籤選擇器
			 */
			p {
				color:#ff0000;
				font-size:30px;
			}</span>

　　（2）類選擇器

<span style="font-size:14px;">			/*
			 class選擇器，類選擇器
			 */
			.p_1 {
				color:green;
				font-size:20px;
			}</span>
 

　　類選擇器表示將class屬性為p_1的標籤字型顏色設定為green，大小為20畫素。格式為：“.class屬性名{ }”。

　　（3）ID選擇器

<span style="font-size:14px;">			#p_1 {
				color:#0f0f0f;
				font-size:50px;
			}</span>

　　（4）通用選擇器

<span style="font-size:14px;">　　　　*{
　　　　　　　　font-size: 12px;
　　　　}</span>
 

　　通用選擇器表示將所有標籤字型屬性設定為12畫素。格式為：“ * { }”。

3、擴充套件選擇器

當基本的選擇器不能夠完全符合需求時，就出現了擴充套件選擇器，這裡介紹三種擴充套件選擇器。

　　（1）關聯選擇器

　　需求：我需要p標籤下的b標籤顏色變紅，而不需要所有的p標籤下的顏色變紅。這時候需要關聯選擇器：

<span style="font-size:14px;">			p b {  
				color:red;
			}</span>

　　那麼，如果我的HTML程式碼是這樣：

<span style="font-size:14px;">		<table >
			<tr>
				<td>胡根得</td>
			</tr>
		</table>
		<table>
			<tr>
				<td>岳飛</td>
			</tr>
		</table></span>
 

　　我們可以使用類選擇器或ID選擇器與擴充套件選擇器相結合。以與類選擇器結合為例，首先將HTML程式碼變為：

<span style="font-size:14px;">		<table class="name">
			<tr>
				<td>胡根得</td>
			</tr>
		</table>
		<table>
			<tr>
				<td>岳飛</td>
			</tr>
		</table></span>

<span style="font-size:14px;">			.name tr td {
				color:red;
			}</span>

　　（2）組合選擇器

　　需求：我的HTML程式碼如下，我需要將p、b、i、u標籤下的顏色全部變紅，怎麼辦？

<span style="font-size:14px;">		<p>aa</p>
		<b>bb</b><br/>
		<i>cc</i><br/>
		<u>dd</u><br/></span>

<span style="font-size:14px;">			p, i, u, b {
				color:red;
			}</span>

　　這表示將p、b、i、u標籤下的顏色全部變紅，省去了用標籤選擇器的一個一個設定。

　　（3）偽元素選擇器 

　　HTML中預先定義好的一些選擇器，稱為偽元素。是因為CSS的術語。

　　偽元素格式：標籤名：偽元素；類名：偽元素。

　　常見的有：

<span style="font-size:14px;">		a:link  超連結未點選狀態。
		a:visited 被訪問後的狀態。
		a:hover 游標移到超連結上的狀態（未點選）。
		a:active 點選超連結時的狀態。</span>

　　HTML程式碼：

<span style="font-size:14px;">		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.sina.com">新浪</a>
		<a href="http://www.youku.com">優酷</a></span>

<span style="font-size:14px;">		<style type="text/css">
			a:link {
				color:red;
			}
			
			a:visited {
				color:blue;
			}
			
			a:hover{
				color:green;
				text-decoration:line-through; //當滑鼠放上去時候為標籤下內容加上貫穿線
			}
			
			a:active{
				color:yellow;
			}
			
			a {
				text-decoration:none; //表示對a標籤下內容無額外裝飾
			}
		</style></span>

　　附：CSS選擇器合集：

　　小結：CSS是為美化和優化HTML程式碼而存在，通過使用CSS使得HTML更加簡潔、高效。而CSS中的選擇器目的是指定CSS要作用的標籤物件，而且基本選擇器和擴充套件選擇器可以結合使用，發揮更大的功效。