首頁 > 開發者 > JavaScript
CSS知識總結（二），css知識總結
CSS的選擇符分成：
1. 通配選擇符
2. 元素選擇符
3. 群組選擇符
4. 關係選擇符
5. id及class選擇符
6. 偽類選擇符
7. 屬性選擇符
8. 偽對象選擇符
1.通配選擇符（*）
* 號表示所有的對象。
所謂通配選擇符，就是指可以使用模糊指定的方式來對象進行選擇，指定樣式。
例子原始碼：
/* CSS代碼 */*{ color:gray;}
<!-- HTML代碼 --><body> <p>這是灰色字型的p標籤</p> <span>這是灰色字型的span標籤</span></body>
效果：
這是灰色字型的p標籤
這是灰色字型的span標籤
2.元素選擇符
所謂元素選擇符，指以網頁中已有的標籤名作為名稱的選擇符。
例子原始碼：
/* CSS代碼 */p{ color:gray;}span{ color:brown;}
<!-- HTML代碼 --><body> <p>這是灰色字型的p標籤</p> <span>這是棕色字型的span標籤</span></body>
效果：
這是灰色字型的p標籤
這是棕色字型的span標籤
3.群組選擇符
對一組標籤進行相同的樣式定義；使用逗號對選擇符進行分隔，對頁面中需要使用相同樣式的地方，只需寫一次樣式。
例子原始碼：
/* CSS代碼 */p,span{ color:brown;}
<!-- HTML代碼 --><body> <p>這是棕色字型的p標籤</p> <span>這是棕色字型的span標籤</span></body>
效果：
這是棕色字型的p標籤
這是棕色字型的span標籤
4.關係選擇符
a.包含選擇符（E F）
選擇所有被E元素包含的F元素。
例子原始碼：
/* CSS代碼 */ul li a{ color:red;}
<!-- HTML代碼 --><body> <ul> <li> <a href="">功能表項目</a> <ul> <li><a href="">清單項目1</a></li> <li><a href="">清單項目2</a></li> <li><a href="">清單項目3</a></li> </ul> </li> </ul></body>
此例，使用ul li a，那麼所有a標籤都會變紅色。
效果：
b.子選擇符（E > F）
選擇所有作為E元素的子項目F。
例子原始碼：
/* CSS代碼 */.nav > li > a{ color:red;}
<!-- HTML代碼 --><body> <ul class="nav"> <li> <a href="">功能表項目</a> <ul> <li><a href="">清單項目1</a></li> <li><a href="">清單項目2</a></li> <li><a href="">清單項目3</a></li> </ul> </li> </ul></body>
此例，使用.nav>li>a，那麼只有.nav的li下面的a標籤才會變紅色。
效果：
c.相鄰選擇符（E + F）
選擇緊貼在E元素之後的F元素。
例子原始碼：
/* CSS代碼 */p+p{color:red;}
<!-- HTML代碼 --><body> <h3>這是一個標題</h3> <p>這是第1個p標籤</p> <p>這是第2個p標籤</p> <h3>這是一個標題</h3> <p>這是第3個p標籤</p> <p>這是第4個p標籤</p></body>
此例，使用p+p{color:red;}，選擇緊貼在p標籤後的p標籤，那麼第2個p標籤和第4個p標籤將會變成紅色。
效果：
這是一個標題這是第1個p標籤
這是第2個p標籤
這是一個標題這是第3個p標籤
這是第4個p標籤
d.兄弟選擇符（E ~ F）
選擇E元素的所有兄弟元素F。
例子原始碼：
/* CSS代碼 */p~p{color:red;}
<!-- HTML代碼 --><body> <h3>這是一個標題</h3> <p>這是第1個p標籤</p> <p>這是第2個p標籤</p> <h3>這是一個標題</h3> <p>這是第3個p標籤</p> <p>這是第4個p標籤</p></body>
此例，使用p~p{color:red;}，選擇p標籤的其它所有p標籤，那麼第2個p標籤、第3個p標籤和第4個p標籤將會變成紅色。
效果：
這是一個標題這是第1個p標籤
這是第2個p標籤
這是一個標題這是第3個p標籤
這是第4個p標籤
5.id及class選擇符
id及class均是css提供由使用者自訂標籤名稱的選擇符，使用者可以使用選擇符id及class來面對頁面中的xhtml標籤進行自訂名稱，從而達到擴充xhtml標籤及組合HTML標籤的目的。
a.id選擇符（E#id）
id選擇符可以為標有特定id的HTML元素指定特定的樣式。
id選取器以“#”來定義。
*在網頁中，一個id名稱只能使用一次，不得重複。
例子原始碼：
/* CSS代碼 */#content{ color:gray;}
<!-- HTML代碼 --><body> <p id="content">本文內容</p></body>
效果：
本文內容
b.class選擇符（E.class）
不同於id選擇符的唯一性，class選擇符可以同時定義多個。
例子原始碼：
/* CSS代碼 */.a{ color:gray;}.b{ font-weight:bold;}
<!-- HTML代碼 --><body> <p class="a b">本文內容</p></body>
效果：
本文內容
6.偽類選擇符
偽類選擇符種類特別多，這裡並未列出所有的偽類選擇符，但都支援現代瀏覽器（除了IE6-8）
這裡，我舉例幾個常用的偽類選擇符：
原始碼：
/* CSS代碼 */a{ text-decoration:none; /*改變a連結的樣式*/}a:link{ color:black; /*設定超連結a在未被訪問前的樣式*/}a:visited{ color:gray; /*設定超連結a在其連結地址已被訪問過時的樣式*/}a:hover{ color:blue; /*設定元素在其滑鼠移至上方時的樣式*/}a:active{ color:red; /*設定元素在被使用者啟用時的樣式*/}
<!-- HTML代碼 --><body> <p><a href="###">點擊我吧</a></p></body>
效果：
點擊我吧
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
