回覆列表
  • 1 # 使用者2330099431147

    CSS複合選擇器包括子選擇器、相鄰選擇器、包含選擇器、多層選擇器巢狀、屬性選擇器、偽選擇器和偽元素選擇器,以上具體的使用如下:

    1.子選擇器

    複製程式碼

    程式碼如下:

    <style type="text/css">

    #pic>img{ // 使用 > 號,讓選擇器只選擇直接的子類,width:200px;

    height:200px;

    }

    </style>

    <div>

    <img src="1.jpg" />

    <span><img src="btn" /></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}

    定義<div id = "header">包含框裡的段落字型大小為14畫素

    定義<div id = "main">包含框裡的段落字型大小為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}:

    給<img src="images/pic1.jpg" title=“影象”>定義樣式

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

    6.偽選擇器和偽元素選擇器

    複製程式碼

    程式碼如下:

    <style type ="text/css">

    a:link{color:#FF0000} /*正常連結狀態下樣式*/

    a:visited{color:#0000FF} /*被訪問之後的樣式*/

    a:hover{color:#00FF00} /*滑鼠經過的樣式*/

    a:active{color:#FF00FF} /*超連結被啟用的樣式*/

    </style>

  • 中秋節和大豐收的關聯?
  • 電影港囧裡面播放了那幾首經典歌曲?