CSS选择器详解（一）常用选择器
目錄
- 類型選擇器
- 類選擇器
- ID選擇器
- 偽類
- 偽元素
?
? 類型選擇器
通過(guò)類型選擇器可以選擇某一類型的html標(biāo)簽，并對(duì)其使用樣式。
語(yǔ)法：
selector {property1: value; property2:value; ...}示例：
<html><head><style type="text/css"> h1 { color:Red; font-size:30px;} </style></head><body><h1>這是一個(gè)h1標(biāo)簽</h1> </body> </html>效果圖：
h1 { color:Red; font-size:30px; }這行代碼選擇了h1標(biāo)簽，并將h1元素的顏色改為紅色，字體大小改為20px.?類型選擇器也可以使用嵌套的形式來(lái)選擇類型，這種方式也被稱為后代選擇器
示例：
<html><head><style type="text/css"> h1 { color:Red; font-size:30px;}div h1{ color:Blue; font-size:20px;}</style></head><body><h1>這是一個(gè)h1標(biāo)簽</h1><div><h1>這是一個(gè)包含在div內(nèi)的h1標(biāo)簽</h1> </div></body> </html>效果圖：
div h1{ color:Blue; font-size:20px;}這行代碼只選擇了所有div元素內(nèi)部的h1元素，并將顏色改為紅色，字體大小改為16px，div元素外部的所有h1都不會(huì)受到影響。
?
? 類選擇器
通過(guò)類選擇器可以選擇class相同的html標(biāo)簽，并對(duì)其使用樣式。
語(yǔ)法：
.selector { property1: value; property2: value; ...}示例：
<html><head><style type="text/css"> .error-message { color:Red; line-height:2px;} </style></head><body><h3 class="error-message">Error Message:</h1><p class="error-message">description</p> </body> </html>效果圖：
.error-message { color:Red; line-height:2px;}這行代碼選擇了所有類為error-message的元素，并將其顏色改為紅色，行間距改為2px.
?
? ID選擇器
ID選擇器可以選擇ID為某值的特定元素，并對(duì)其使用樣式。
語(yǔ)法：
#selector { property1: value; property2:value; ...}示例：
<html><head><style type="text/css"> #title { color:Gray;} </style></head><body><h1 id="title">Title</h1> </body> </html>效果圖：
#title { color:Gray;}這行代碼選擇id為title的元素，并將其顏色改為Gray.
?
Tips:
有時(shí)頁(yè)面會(huì)出現(xiàn)很多包含類或ID的元素，而它們之間的差異僅僅是出現(xiàn)在頁(yè)面中的位置不同，不要給這些元素指定不同的類或ID，應(yīng)將一個(gè)類或ID賦給它們的父元素，然后使用后代選擇器定位它們。? 偽類
有時(shí)我們需要根據(jù)文檔結(jié)構(gòu)之外的其它條件對(duì)元素應(yīng)用樣式，偽類用于向某些選擇器添加特殊效果。 語(yǔ)法： selector : pseudo-class {property1: value； property2:value;}?
示例1： <html><head><style type="text/css"> a:link{color: Red;} a:hover{color: Green;}a:visited{color: Blue;}</style></head><body><a href="http://www.cnblogs.com/fattydoit/" target="_blank">小胖搞IT</a></body> </html>效果圖：
未訪問(wèn)鏈接時(shí)：
鼠標(biāo)懸停在鏈接上時(shí)：
訪問(wèn)過(guò)鏈接：
a:link{color: Red;} a:hover{color: Green;} a:visited{color: Blue;}第一行代碼將未訪問(wèn)的標(biāo)簽顏色設(shè)置為紅色，第二行代碼將鼠標(biāo)懸停在標(biāo)簽上時(shí)標(biāo)簽的顏色設(shè)置為綠色，第三行代碼將訪問(wèn)過(guò)的標(biāo)簽設(shè)置為藍(lán)色。
?
示例2：
<html><head><style type="text/css"> p:first-child{color: Red;}</style></head><body><p>第一段</p><p>第二段</p><p>第三段</p><div><p>第一段</p><p>第二段</p></div></body> </html>?效果圖：
p:first-child{color: Red;}這行代碼將任意元素的第一個(gè)子元素p設(shè)置為紅色。
?
? 偽元素
偽元素也是用來(lái)向某些選擇器添加特殊效果的，很容易和偽類混淆，簡(jiǎn)單地說(shuō)，偽類是用來(lái)匹配頁(yè)面上真是存在的元素，如:link用來(lái)匹配a元素，而偽元素用來(lái)匹配邏輯上存在，但在頁(yè)面上并不存在的元素。
語(yǔ)法：
selector :: pseudo-element {property1: value； property2:value;}?
示例：
?
<html><head><style type="text/css"> p::first-letter{color: Red;}#p-with-logo::before{content:url(star.png);} </style></head><body><p>這個(gè)段落首字符為紅色</p><p id="p-with-logo">這個(gè)段落有Logo</p></body> </html>效果圖：
p::first-letter{color: Red;} #p-with-logo::before{content:url(star.png);}第一行代碼找到p元素的第一個(gè)字符，并將其設(shè)置為紅色，第二行代碼找到id為p-with-logo的p元素，在它前面放一個(gè)logo.
?
參考資料：
- 《精通CSS:高級(jí)Web標(biāo)準(zhǔn)解決方案(第2版)》
- W3School
?
常用選擇器介紹到此結(jié)束，下一回來(lái)介紹通用選擇器和高級(jí)選擇器...
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/fattydoit/p/3492028.html
總結(jié)
以上是生活随笔為你收集整理的CSS选择器详解（一）常用选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Easyui入门视频教程 第11集---
- 下一篇： CSS 基本样式