您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css復(fù)合選擇器有什么用,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
css復(fù)合選擇器是由兩個或多個基礎(chǔ)選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。CSS復(fù)合選擇器包括子選擇器、相鄰選擇器、包含選擇器、多層選擇器嵌套、屬性選擇器、偽選擇器和偽元素選擇器,以上具體的使用如下:
1.子選擇器代碼如下:
<style type="text/css"> #pic>img{ // 使用 > 號,讓選擇器只選擇直接的子類,width:200px; height:200px; } </style> <div id="pic"> <img src="1.jpg" alt="photo" /> <span><img src="btn" alt="點擊大圖" /></span> </div>
2.相鄰選擇器
如果需要選擇緊接在另一個元素后的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器(Adjacent sibling selector)。
例如,如果要增加緊接在 h2 元素后出現(xiàn)的段落的上邊距,可以這樣寫:
h2 + p {margin-top:50px;}
這個選擇器讀作:“選擇緊接在 h2 元素后出現(xiàn)的段落,h2 和 p 元素?fù)碛泄餐母冈亍薄?/p>
3.包含選擇器
代碼如下:
#header p{font-size:14px} #main p {font-size:12}
定義<div id = "header">包含框里的段落字體大小為14像素
定義<div id = "main">包含框里的段落字體大小為12像素.
4.多層選擇器嵌套
代碼如下:
#wrap #header h3 span {font-size:24px} #wrap #main h3 span {font-size:14px}
5.屬性選擇器
(1)匹配屬性名選擇器
div[class] {font-size:24px;}
使該選擇器能夠匹配div中設(shè)置了class屬性的對象定義格式
(2)匹配屬性值選擇器
img[alt="圖像"][title="圖像"] {border:solid 2px red}:
給<img src="images/pic1.jpg" alt="圖像" title=“圖像”>定義樣式
(3)模糊匹配屬性值選擇器
6.偽選擇器和偽元素選擇器
<style type ="text/css"> a:link{color:#FF0000} /*正常鏈接狀態(tài)下樣式*/ a:visited{color:#0000FF} /*被訪問之后的樣式*/ a:hover{color:#00FF00} /*鼠標(biāo)經(jīng)過的樣式*/ a:active{color:#FF00FF} /*超鏈接被激活的樣式*/ </style>
關(guān)于css復(fù)合選擇器有什么用就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。