子選擇符：
E>F
選擇所有作為E元素的子元素F
<style> div>p{ color: red; } </style>
<div> <h3>我是標題1</h3> <p>我第1個是p標簽</p> <p>我第2個是p標簽</p> <p>我第3個是p標簽</p> <small>我是小標題</small> </div>
顯示效果：
相鄰選擇符：
E+F
選擇緊貼在E元素之后F元素。
<style> div+p{background: red;} </style>
<div> <h3>我是標題1</h3> </div> <div> <small>我是小標題</small> <p>我第1個是p標簽</p> </div> <p>我就是緊貼在div元素后面的p元素</p> <p>我第3個是p標簽</p> </div>
顯示效果：
兄弟選擇符：
E~F
選擇E元素所有兄弟元素F。
<style> div~p{ background: yellow; } </style>
<div> <p>我第1個是p標簽，我在div里</p> <p>我第2個是p標簽，我在div里</p> </div> <p>我第3個是p標簽，我不在div里</p> <p>我第3個是p標簽，我不在div里</p>
顯示效果：
偽類選擇符：
選擇符 描述
1、E:link 設置超鏈接a在未被訪問前的樣式。
<style> a:link{ background-color:yellow; color:blue; } </style>
<a href="http://www.daidu.com">百度</a> <a href="http://www.daidu.com">百度</a> <a href="http://www.daidu.com">百度</a>
顯示效果：未被訪問前是黃色的背景色和字體是藍色
2、E:visited 設置超鏈接a在其鏈接地址已被訪問過時的樣式。
3、E:hover 設置元素在其鼠標懸停時的樣式。
4、E:active 設置元素在被用戶激活
<style> a:visited {color:green;} a:hover {color:red;} a:active {color:yellow;} </style>
<p>將鼠標移上並點擊此鏈接: <a href="#">訪問后是綠色的，鼠標懸停時時紅色的，點擊那刻是黃色的</a></p>
5、E:focus 設置元素在成為輸入焦點 (該元素的onfocus事件發生)時的樣式。
<style> input:focus{background-color:yellow;} </style>
用戶名：<input type="text" name="user" />
效果：點擊文本輸入框表單可以看到黃色背景
6、E:lang(fr) 匹配使用特殊語言的E元素。很少用
<style> p:lang(abc) { color: #f00; } p:lang(d) { color: #ccc; } </style> <p lang="abc">（效果為紅色的字體）</p> <p lang="d">（效果為灰色的字體）</p>
7、E:not(s) 匹配不含有s選擇符的元素E。
<style> p:not(.abc) { color: #f00;} </style> <p class="abc">否定偽類選擇符 E:not(s)</p> <p id="abc">否定偽類選擇符 E:not(s)</p> <p class="abcd">否定偽類選擇符 E:not(s)</p> <p>否定偽類選擇符 E:not(s)</p>
顯示效果：
8、E:root 匹配E元素在文檔的根元素。常指html元素
父類型中的子元素：
9、E:first-child 匹配父元素的第一個子元素E。
10、E:last-child 匹配父元素的最后一個子元素E。
11、E:only-child 匹配父元素僅有的一個子元素E。
12、E:nth-child(n) 匹配父元素的第n個子元素E。
13、E:nth-last-child(n) 匹配父元素的倒數第n個子元素E。
父類型中的子元素拿以上幾個例子來測試如下：
<style> div p:first-of-type {color: red;}/* 父類元素的第一個子元素 */ div p:last-of-type {color: yellow;}/* 父類元素的最后一個子元素 */ div p:nth-of-type(4) {color: blue;}/* 父類元素的第四個子元素 */ </style> <div> <p>我是第一個p標簽，是紅色</p> <p>11111111</p> <p>11111111</p> <p>我是第四個p標簽，是藍色</p> <p>11111111</p> <p>我是最后一個p標簽，是黃色</p> </div>
效果顯示：
同類型中的同級兄弟元素：
14、E:first-of-type 匹配同類型中的第一個同級兄弟元素E。
15、E:last-of-type 匹配同類型中的最后一個同級兄弟元素E。
16、E:only-of-type 匹配同類型中的唯一的一個同級兄弟元素E。
17、E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E。
18、E:nth-last-of-type(n)匹配同類型中的倒數第n個同級兄弟元素E。
拿以上同類型中的同級兄弟元素的幾個例子測試如下：
<style> p:first-of-type {color: red;}/* 同類型中的第一個同級兄弟元素 */ p:last-of-type {color: yellow;}/* 同類型中的最后一個 */ p:nth-of-type(4) {color: blue;}/* 同類型中的第四個 */ </style> <p>我是第一個p標簽，是紅色</p> <p>11111111</p> <p>11111111</p> <p>我是第四個p標簽，是藍色</p> <p>11111111</p> <p>我是最后一個p標簽，是黃色</p>
效果：
19、E:empty 匹配沒有任何子元素（包括text節點）的元素E。
<style> p:empty { height: 25px; border: 1px solid #ddd; background: #eee; } </style> <div> <p>結構性偽類選擇符 E:empty</p> <p><!--我是沒文字的空標簽--></p> <p>結構性偽類選擇符 E:empty</p> </div>
效果圖：
20、E:checked 匹配用戶界面上處於選中狀態的元素E。(用於input type為radio與checkbox時)
<style> input:checked{ width: 25px; height: 25px; } </style> <input type="radio"/>女 <input type="radio"/>男
效果是被選中時寬高都變25px：
21、E:enabled 匹配用戶界面上處於可用狀態的元素E。
22、E:disabled 匹配用戶界面上處於禁用狀態的元素E。
E:enabled、E:disabled測試如下：
<style> input[type="text"]:enabled { background:#ffff00; } input[type="button"]:disabled { background: ccc; } </style> <form action=""> 用戶名: <input type="text" value="可用" /><br> 用戶名: <input type="text" value="可用" /><br> 注 冊: <input type="button" disabled="disabled" value="禁用了" /><br> </form>
效果：
23、E:target 匹配相關URL指向的E元素。
<style> .box ul{list-style: none;} .box ul li{ float: left; margin-left: 20px;} a:target{ color: red; } </style> <div class="box"> <ul> <li><a href="#nav1" id="nav1">導航一</a></li> <li><a href="#nav2" id="nav2">導航二</a></li> <li><a href="#nav3" id="nav3">導航三</a></li> </ul> </div>
效果：鼠標點擊那個導航時那個導航字體就變紅。
當點擊在導航三看導航三的內容時，導航三的字體的紅色可以當做標記來記住當前的位置
注意：<a>標簽的id要和href鏈接的地址一樣。