css複合選擇器是什麼?-css教學-PHP中文網

首頁

web前端

css教學

css複合選擇器是什麼?

藏色散人

May 17, 2019 pm 01:17 PM

css複合選擇器是什麼?

css複合選擇器是由兩個或多個基礎選擇器，透過不同的方式組合而成的，目的是為了可以選擇更準確更精細的目標元素標籤。

CSS複合選擇器包含子選擇器、相鄰選擇器、包含選擇器、多層選擇器巢狀、屬性選擇器、偽選擇器和偽元素選擇器，

以上具體的使用如下：

1、子選擇器，程式碼如下:

<style type="text/css">
#pic>img{ // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"   alt="photo" />
<span><img src="/static/imghw/default1.png"  data-src="btn"  class="lazy"   alt="点击大图" /></span>
</div>

登入後複製

2、相鄰選擇器

如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。

例如，如果要增加緊接在h1 元素後出現的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}

登入後複製

這個選擇器讀作：「選擇緊接在h1元素後出現的段落，h1 和p 元素擁有共同的父元素」。

3、包含選擇器

程式碼如下:

#header p{font-size:14px}
#main p {font-size:12}

登入後複製

定義

包含框裡的段落字體大小為14像素
定義

包含框裡的段落字體大小為12像素.

##4、多層選擇器嵌套

程式碼如下:

#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}

登入後複製

5、屬性選擇器

（1）符合屬性名稱選擇器

div[class] {font-size:24px;}

登入後複製

使該選擇器能夠匹配div中設定了class屬性的物件定義格式

（2)匹配屬性值選擇器

img[alt="图像"][title="图像"] {border：solid 2px red}：

登入後複製

給

定義樣式

(3)模糊匹配屬性值選擇器

##6、偽選擇器和偽元素選擇器

<style type ="text/css">
a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/
</style>

登入後複製

以上是css複合選擇器是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn