Css3選擇器基礎知識有哪些

這篇文章主要介紹“Css3選擇器基礎知識有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Css3選擇器基礎知識有哪些”文章能幫助大家解決問題。

div > p 選擇父元素為div的所有子元素。

div + p 選擇緊接在div后的所有子元素。

[target] 選擇帶有target屬性的元素 a[target] {...}

[target=_blank] 選擇target為_blank的所有子元素。

[title~=flower] 選擇title屬性包含單詞flower的元素。

[lang|=en]選擇lang屬性以en開頭的所有元素。

[p:first-letter] 選擇p元素開頭的所有首字母。

[p:first-line] 選擇每個p元素的首行。

[p:first-child] 選擇屬于其父元素的首個子元素的每個 <p> 元素 就是相對比某個父元素下的所有p元素的第一個p 必須聲明 <!DOCTYPE>。

[p:before] 在每個p元素之前插入內容 p:before{content:"臺詞：";} ::css3寫法 : css2寫法。

[p:after] 在每個p元素后插入內容。

[p:lang(it)] 選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。

[p~ul] 選擇前面有<p>元素的每個<ul>元素。

a[src^="https"] 選擇所有a 屬性中src以https開頭的 ^表示開頭。

a[src$=".pdf"] 選擇所有a中屬性src以pdf結尾的 $表示結尾。

a[src*="abc"] 選擇所有a中屬性src包含abc的元素。

div p:first-of-type div下首個p元素 p可以不是第一個。

div p:last-of-type div下最后一個p元素。

div p:only-of-type div中只有一個p元素 可以包含其他元素。

div p:only-child div中只有一個p元素 不能包含其他元素 ie不支持。

div p:nth-child（2） div下第二個p元素。

div p:nth-last-child(2) div下倒數第二個p元素 Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞 使用公式 (an + b)。描述：表示周期的長度，n 是計數器（從 0 開始），b 是偏移值。

div p:nth-of-type(2) div下第二個p 2可以用奇偶數 可以用公式。

div p:nth-last-of-type(2) div下倒數第二個p。

div p:last-child div下最后一個p 相當于div p:nth-last-child(1)。

p:empty 選擇沒有子元素的每個 <p> 元素（包括文本節點）。

#news:target 選擇當前活動的 #news 元素。

input:enabled input:disabled input:checked(只有 Opera 支持 :checked 選擇器。

input[type="text"]:enabled 為所有 type="text" 的已啟用的 input 元素設置背景色。

關于“Css3選擇器基礎知識有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。