在HTML中常見選擇器有：
行內選擇器、標簽選擇器、id選擇器、類選擇器（class）
內聯樣式
內聯樣式通過style將樣式直接寫在標簽里面；
格式為：style=“屬性1:屬性值1；屬性2:屬性值2；…”
例如：
<div style="color:Red;"></div>
行內選擇器比較少用，原因是比較繁瑣，代碼比較少的時候可以考慮使用，但是代碼一多，就會導致看着很亂。
標簽選擇器
標簽選擇器就是利用標簽名通過內部樣式將標簽+樣式給表現出來；
格式為：標簽{ 樣式1；樣式2；…}
例如：
<style>
div{color:Red;}
</style>
使用標簽選擇器進行樣式設置將會改變該標簽下的所有格式。
ID選擇器
ID選擇器在標簽內定義一個id=“idname”，在內部樣式中使用 #idname{樣式} 的方式使用id選擇器。
例如：
<html>
<head>
<title>id選擇器</title>
<style type="text/css">
#p1{
color:blue;
font-size:18px;
}
</style>
</head>
<body>
<p id="p1"> 這是一段測試文本</p>
</body>
</html>
類選擇器（class）
類選擇器在標簽內定義一個class=“classname”，在內部樣式中使用 .classname{樣式} 的方式使用id選擇器。
例如：
<html>
<head>
<title>類選擇器</title>
<style type="text/css">
.pclass{
color:blue;
font-size:18px;
}
</style>
</head>
<body>
<p class="pclass"> 這是一段測試文本</p>
</body>
</html>
優先級
在css的優先規則中，優先級關系：內聯樣式 > ID 選擇器 > 類選擇器 > 標簽選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML選擇器的優先級</title>
<style type="text/css">
p{
color: green;/*綠色*/
}
.blue{
color: blue;/*藍色*/
}
#red{
color: red;/*紅色*/
}
</style>
</head>
<body>
<h3>望廬山瀑布</h3>
<p >日照香爐生紫煙，</p>
<p class="blue">遙看瀑布掛前川。</p>
<p class="blue" id="red">飛流直下三千尺，</p>
<p class="blue" id="red" style="color: black;">疑是銀河落九天。</p>
</body>
</html>
效果如圖：
從第一句到第四句可以很清楚的看到優先的變化是按照
行內樣式（最高級）>id選擇器>類選擇器>標簽選擇器 來變化的
Tip：屬性后插有 !important 的屬性擁有最高優先級，當搞不清楚優先級時，可以通過在屬性的后頭加入!important 來將該屬性提到最高優先級。
錯誤的說法
在學習過程中，你可能發現給選擇器加權值的說法，即 ID 選擇器權值為 100，類選擇器權值為 10，標簽選擇器權值為 1，當一個選擇器由多個 ID 選擇器、類選擇器或標簽選擇器組成時，則將所有權值相加，然后再比較權值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標簽，按理說 110 > 100，應該應用前者的樣式，然而事實是應用后者的樣式。錯誤的原因是：權重的進制是並不是十進制，CSS 權重進制在 IE6 為 256，后來擴大到了 65536，現代瀏覽器則采用更大的數量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110，但因為 11 個均為類選擇器，所以其實總權值最多不能超過 100， 你可以理解為 99.99，所以最終應用后者樣式。