對HTML頁面中的元素使用CSS實現一對一，一對多或者多對一的控制，要用到CSS選擇器。在大篇CSS代碼中，並沒有說明什麼樣式服務於什麼元素，只是在元素中使用了class屬性。而class屬性本身沒有語義，它純粹是用來爲CSS服務的，屬於多餘屬性，並沒把樣式和元素綁定起來，一個CSS類選擇器，文本框可以使用，下拉框也可以使用，甚至按鈕也可以使用，這樣其實非常混亂， 修改時就不方便，所以CSS3中提倡使用選擇器來將樣式與元素直接綁定起來，這樣的話，在樣式中什麼樣式與什麼元素相匹配就會變得一目瞭然，修改起來也很方便。不僅如此，通過css3選擇器我們還可以實現各種複雜的指定， 同時也能大量減少樣式表的代碼書寫量，最終書寫出來的樣式表也會變得簡潔明瞭。
|
基本選擇器 |
說明 |
|
* |
通用元素選擇器，匹配任何元素 |
|
E |
標籤選擇器，匹配所有使用E標籤(所有HTML元素)的元素 |
|
.info |
class選擇器，匹配所有class屬性中包含info的元素 |
|
#footer |
id選擇器，匹配所有id屬性等於footer的元素 |
|
selector1，selector2 |
羣組選擇器，將每一個選擇器匹配的元素集合並 |
層次選擇器
層次選擇器
|
類型 | 功能描述 |
E F
|
後代選擇器 | 選擇匹配的F元素，且F元素被包含在匹配的E元素內 |
E > F
|
子選擇器 | 選擇匹配的F元素，且F元素是E元素的子元素 |
E + F
|
相鄰兄弟選擇器 | 選擇匹配的F元素，且F元素是E元素後面緊鄰的兄弟元素 |
E ~ F
|
通用選擇器 | 選擇匹配的F元素，且F元素是E元素後面的所有兄弟元素 |
屬性選擇器
屬性選擇器
|
功能描述 |
E[attr]
|
選中具有attr屬性的E元素 |
E[attr=val]
|
選中具有attr屬性，並且屬性值爲val的E元素 |
E[attr|=val]
|
選中具有attr屬性，並且屬性值爲val或以val-開頭 |
E[attr~=val]
|
選中具有attr屬性，並且屬性值包含val的E元素，該屬性值必須以空格隔開 |
E[attr*=val]通配符
|
選中具有attr屬性，並且屬性值包含val的E元素 |
E[attr^=val]起始符
|
選中具有attr屬性，並且屬性值以val開始的E元素 |
E[attr$=val]結束符
|
選中具有attr屬性，並且屬性值以val結束的E元素 |
具體實例分析：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
*{margin: 0;padding: 0;}
p{height:30px;border:1px solid #000;margin-bottom: 2px;}
</style>
</head>
<body>
<p cat="leold">leo</p>
<p cat="dp">杜鵬</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
<p cat="leo old">leo</p>
<p cat="old dp">杜鵬</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>上面的代碼結構運行後 的 效果顯示如下：
選中具有 cat 屬性的 P元素，並將其背景色設置爲紅色， 就需要用到 CSS3的屬性選擇器， 代碼如下：
選中選中具有 cat 屬性，並且屬性值包含 old 的P元素，屬性值包含有 old這個單獨的單詞 並且old必須是連寫的不能拆開 代碼及效果圖如下：
選中具有 cat 屬性，並且屬性值包含 old 的P元素， 代碼及效果圖如下：
