標籤：css選取器
CSS選取器
id選取器
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標題文檔</title><style>#box{width:200px;height:200px;border:2px solid #f3f3f3;background:blue;margin:100px auto;}/* id 選擇符 */</style></head><body><div id="box">我是一個盒子——塊狀模型</div></body></html>
注意：id選取器，在<style>中，在屬性名稱前應加上一個“#”號，代表引用。
2.class選取器
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標題文檔</title><style>.box1{width:200px;height:200px;background:red;}.box2{border:2px solid #333;background:blue;}/* class 選擇符 */</style></head><body><div class="box1">我是第一個盒子</div><div class="box2 box1">我是第二個盒子</div><div class="box1">我是第三個盒子，樣式跟第一個盒子一樣</div></body></html>
注意：class選取器，在<style>中，在屬性名稱前應加上一個“.”號，代表引用。
溫馨提示650) this.width=650;" src="http://img.baidu.com/hi/jx2/j_0057.gif" alt="j_0057.gif" />：
id選取器和class選取器的區別：id名稱是文檔唯一且不可重複出現的，
class選取器名稱是可重複使用的，因此也稱為類別選取器。
3.標籤選取器
顧名思義，是根據標籤名字來進行匹配樣式的選取器。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標題文檔</title><style>p{width:100px;height:100px;background:blue;}div {width:50px;height:50px;background:red;margin-bottom:10px;}/* 標籤 選擇符 */</style></head><body><div>塊</div><div>塊</div><div>塊</div><p>p1</p><p>p1</p><p>p1</p></body></html>
4.群組選取器
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標題文檔</title><style>#box1,#box2,#box3{width:100px; height:100px; background:blue;}/* 群組 選擇符 */</style></head><body><div id="box1">塊</div><div id="box2">塊</div><div id="box3">塊</div></body></html>
5.包含選取器
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標題文檔</title><style>div span p{width:100px; height:100px; background:blue;}/* 包含 選擇符 */</style></head><body><div><p>p1</p></div><div><p>p2</p> <span> <p>p3</p> </span></div><div>塊</div><p>p1</p><p>p1</p><p>p1</p></body></html>
不難看出，包含選取器中，只有在div裡面的span中的p標籤的內容才有變化。
6.萬用字元
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標題文檔</title><style>*{font:20px/30px;color:#e3e3e3;text-align:center;}/* 包含 選擇符 */</style></head><body><div><p>我是小倩加油站~~</p></div><div><p>哎呦喂</p> <span> <p>嘿嘿嘿~</p> </span></div><div>乾巴爹~</div><p>哎呀~</p><p>嘻哈~</p><p>喲喲~</p></body></html>
7.選取器優先順序
前面介紹了這麼多選取器，接下來該說說這些選取器的優先順序，如果在同一文檔中出現不同的選取器，應該表現何種樣式，於是優先順序就誕生了。
選取器優先順序
標籤選取器 < class選取器 < id選取器 < style行間樣式 < js
溫馨提示650) this.width=650;" src="http://img.baidu.com/hi/jx2/j_0057.gif" alt="j_0057.gif" />：
如果同樣的選取器出現文檔中，預設後者覆蓋前者的選取器，則表現為後面選取器的樣式。
本文出自 “小倩加油站” 部落格，請務必保留此出處http://cherry360.blog.51cto.com/12176744/1863793
Web前端入門學習（3）——CSS選取器
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
