1.id選擇器：（一一對應，一個id對應一個元素）為標有特定 id 的 html元素指定特定的樣式。以 "#" 來定義。

 例子：

html程式碼

<div id="only">哈哈哈哈哈</div>

css程式碼

#only{
	background-color: red;
}

div中的元素背景顏色顯示為紅色

2.類(class)選擇器：（多對多，一個元素可以對應多個class,一個class可以對應多個元素）class選擇器以“.”來定義。

例子：

html程式碼

<p class="demo">hahahahhahaha</p>
 

css程式碼

.demo{
	background-color: red;
}

p中元素的背景顏色為紅色

當一個元素對應多個class的時候，可以直接在demo後加空格繼續寫，如下

html程式碼

<p class="demo demo1">hahahahhahaha</p>

css程式碼

.demo{
	background-color: #f40;
}
.demo1{
	color:yellow;
}

3.標籤選擇器：標籤選擇器以標籤名來定義。選中後所有該標籤均變化

html程式碼

<span>哈哈哈哈哈</span>
    <div>
        <span>hahahhahhaha</span>

</div>
 

css程式碼

span{
        color:green;

}

所有span標籤中的元素顏色都是green

4.萬用字元選擇器：萬用字元選擇器以"*"來定義，對於所有的標籤都適用。

例子：

html程式碼

<p>galaxyhahhaha</p>

    <div>哈哈哈哈哈哈哈</div>

<strong>你好</strong>

css程式碼

* {

   background-color：yellow;
}

5.父子選擇器/派生選擇器：建立規則，使規則在某些文件結構中起作用，而在另外一些結構中不起作用。

舉例，如果希望只對 div元素中的 span元素應用樣式

html程式碼：

 	<div>
 		<strong>
 			<span>123</span>
 		</strong>
 	</div>
 	<span>345</span>

css程式碼：

div strong span{
	background-color: red;
}