常州布谷鳥網絡,常州網絡公司,常州網站設計,常州小程序,常州APP開發,常州小程序開發公司,常州網站建設,常州微信公眾號維護
前端CSS中偽類“first-child”的作用
日期:2021-1-6 8:40:35  閱讀:

選擇屬于其父元素的首個子元素的每個

元素,并為其設置樣式:

p:first-child{ 
background-color:yellow;
}

改為last,就是對應其父元素的最后一個子元素


CSS 選擇器參考手冊

在 CSS 中,選擇器是一種模式,用于選擇需要添加樣式的元素。

"CSS" 列指示該屬性是在哪個 CSS 版本中定義的。(CSS1、CSS2 還是 CSS3。)

選擇器例子例子描述CSS
.class.intro選擇 class="intro" 的所有元素。1
#id#firstname選擇 id="firstname" 的所有元素。1
**選擇所有元素。2
elementp選擇所有

元素。

1
element,elementdiv,p選擇所有
元素和所有

元素。

1
element elementdiv p選擇
元素內部的所有

元素。

1
element>elementdiv>p選擇父元素為
元素的所有

元素。

2
element+elementdiv+p選擇緊接在
元素之后的所有

元素。

2
[attribute][target]選擇帶有 target 屬性所有元素。2
[attribute=value][target=_blank]選擇 target="_blank" 的所有元素。2
[attribute~=value][title~=flower]選擇 title 屬性包含單詞 "flower" 的所有元素。2
[attribute|=value][lang|=en]選擇 lang 屬性值以 "en" 開頭的所有元素。2
:linka:link選擇所有未被訪問的鏈接。1
:visiteda:visited選擇所有已被訪問的鏈接。1
:activea:active選擇活動鏈接。1
:hovera:hover選擇鼠標指針位于其上的鏈接。1
:focusinput:focus選擇獲得焦點的 input 元素。2
:first-letterp:first-letter選擇每個

元素的首字母。

1
:first-linep:first-line選擇每個

元素的首行。

1
:first-childp:first-child選擇屬于父元素的第一個子元素的每個

元素。

2
:beforep:before在每個

元素的內容之前插入內容。

2
:afterp:after在每個

元素的內容之后插入內容。

2
:lang(language)p:lang(it)選擇帶有以 "it" 開頭的 lang 屬性值的每個

元素。

2
element1~element2p~ul選擇前面有

元素的每個

    元素。
3
[attribute^=value]a[src^="https"]選擇其 src 屬性值以 "https" 開頭的每個 元素。3
[attribute$=value]a[src$=".pdf"]選擇其 src 屬性以 ".pdf" 結尾的所有 元素。3
[attribute*=value]a[src*="abc"]選擇其 src 屬性中包含 "abc" 子串的每個 元素。3
:first-of-typep:first-of-type選擇屬于其父元素的首個

元素的每個

元素。

3
:last-of-typep:last-of-type選擇屬于其父元素的最后

元素的每個

元素。

3
:only-of-typep:only-of-type選擇屬于其父元素唯一的

元素的每個

元素。

3
:only-childp:only-child選擇屬于其父元素的唯一子元素的每個

元素。

3
:nth-child(n)p:nth-child(2)選擇屬于其父元素的第二個子元素的每個

元素。

3
:nth-last-child(n)p:nth-last-child(2)同上,從最后一個子元素開始計數。3
:nth-of-type(n)p:nth-of-type(2)選擇屬于其父元素第二個

元素的每個

元素。

3
:nth-last-of-type(n)p:nth-last-of-type(2)同上,但是從最后一個子元素開始計數。3
:last-childp:last-child選擇屬于其父元素最后一個子元素每個

元素。

3
:root:root選擇文檔的根元素。3
:emptyp:empty選擇沒有子元素的每個

元素(包括文本節點)。

3
:target#news:target選擇當前活動的 #news 元素。3
:enabledinput:enabled選擇每個啟用的 元素。3
:disabledinput:disabled選擇每個禁用的 元素3
:checkedinput:checked選擇每個被選中的 元素。3
:not(selector):not(p)選擇非

元素的每個元素。

3
::selection::selection選擇被用戶選取的元素部分。3





作者:W3School (來源:W3School

[聲明] 本文系本網編輯轉載,轉載目的在于傳遞更多信息,并不代表本網贊同其觀點和對其真實性負責。如涉及作品內容、版權和其它問題,請在30日內與本網郵箱 7016867@qq.com 聯系,我們將在第一時間刪除內容!
Design By 布谷鳥網絡 Since 2004 | 常州網絡公司 | 常州網站設計 | 常州網頁設計 | 常州小程序開發公司 | 常州微信商城設計 | 常州微信公眾號商城 | 常州小程序商城 | 網站地圖 |
本站由 為布谷鳥網絡(www.gz-gszl.com)提供云計算與安全服務 蘇ICP備12074670號-1
日本一区高清一本大道_五月婷日韩中文字幕_影音先锋中文字幕