要想將CSS樣式應用於特定的HTML元素，首先要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱為選擇器。在CSS中有很多的選擇器，包含標記（標籤）選擇器、類別選擇器、id選擇器、通配符選擇器、標籤指定選擇器、後代選擇器、併集選擇器等，我們來簡單介紹一下！
1.標記選擇器(標籤)標記選擇器是指用HTML標記名稱作為選擇器，按標記名稱分類，為頁面中某一類標記指定統一的CSS樣式。他的基本語法格式為：
標記名 { 屬性1:屬性值1; 屬性2:屬性值2; ... }
2.類選擇器類選擇器使用「.」（英文點號）進行標識，後面緊跟類名。其基本語法格式為：
.類名 { 屬性1:屬性值1; 屬性2:屬性值2; ... }
需要注意的是類名的第一個字符不能使用數字，並且嚴格區分大小寫，一般採用小寫的英文字符。
3.id選擇器id選擇器使用「#」井號進行標識，後面緊跟id名，其基本語法格式如下：
#id名 { 屬性1:屬性值1; 屬性2:屬性值2; ... }
4.通配符選擇器通配符選擇器用「*」星號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。他的基本語法格式為：
* { 屬性1:屬性值1; 屬性2:屬性值2; ... }
5.標籤指定式選擇器標籤指定式選擇器，有兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器或者id選擇器，兩個選擇器之間不能有空格，比方說h1.space或p#one。
6.後代選擇器後代選擇器用來選擇元素或者元素組的後代，其寫法就是把外層標記寫在前面，內層標記寫在後面，中間用空格分割。當編輯發生嵌套時，內層標記就成為外層標記的後代。
7.併集選擇器併集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器都可以作為併集選擇器的一部分。如果某些選擇器定義的樣式完全或部分相同，可利用併集選擇器為他們定義相同的樣式。
標籤、ID、類別選擇器
我們可以按照標籤來選擇，可以對不同的標籤設置不同的樣式：
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>標籤選擇器</title><styletype="text/css"> p{color:red;} span{color:green;}</style></head><body><p>這是一個p標籤</p><span>這是一個span標籤</span></body></html>
存在多個相同標籤的時候，我們可以在想要設置樣式的標籤中加入ID屬性，需要注意ID是唯一不可重複，這樣我們就可以根據ID的屬性來選擇標籤，ID使用#號來表示：
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>ID選擇器</title><styletype="text/css">#one{color:red; } </style></head><body><pid="one">段落1</p><p>段落2</p></body></html>
通常我們可以對某個標籤設置class類及屬性值，然後可以根據class的屬性值來選擇標籤，class使用.選擇：
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>類別選擇器</title><styletype="text/css">.one{color:red;}/*選擇class="one"的標籤設置樣式*/</style></head><body><pclass="one">段落1</p><p>段落2</p></body></html>
指定選擇器
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>指定選擇器</title><styletype="text/css">p.one{color: red;}/*選擇p標籤class屬性為one*/ p.two{color: green;} span.one{ font-size:20px;}</style></head><body><pclass="one">選擇器1</p><pclass="two">選擇器2</p><spanclass="one">選擇器3</span><spanclass="two">選擇器4</span></body></html>
包含選擇器
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <title>包含選擇器</title> <style type="text/css"> .one div span{color: red;} /*選擇div中的h4標籤，而不是外部的h4*/ </style></head><body> <div> <div> <span>這是一個標題</span> </div> <span>這是一個標題</span> </div> <span>這是外部的一個標題</span></body></html>
分組選擇器
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>分組選擇器</title><styletype="text/css">p,span,.one{color: red;}/* 簡化選擇標籤的方式*/</style></head><body><p>這是一個p標籤</p><span>這是一個span標籤</span><divclass="one"><p>這是div內部的p標籤</p></div></body></html>
偽類選擇器
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>偽類選擇器</title><styletype="text/css">p:hover{color: red;}/*滑鼠放到p標籤中顯示紅色*/ p:active{color: blue;}/*滑鼠點擊p標籤的時候顯示紅色*/ a:link{color: pink;}/*超連結在訪問之前的狀態*/ a:visited{color: green;}/*超連結在訪問之後的狀態*/</style></head><body><p>這是一個段落</p><ahref="#">這是一個超連結</a></body></html>
通用選擇器
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>通用選擇器</title><styletype="text/css">*{padding:0;margin:0;}/*選擇頁面所有的標籤,一般用來初始化頁面*/</style></head><body><p>這是一個段落</p><span>這是一個span標籤</span></body></html>
代碼排版不易於閱讀，我們沒有辦法，如果感興趣的可以多多轉發支持，或者關注鱷魚君Ba，一起學習一些技能。