十分鐘搞定CSS選擇器

2022-02-06 18:53:36 字數 3139 閱讀 1030

在最近的web開發中是不是就會用到一些選擇器,發現很多尤其是css3新增的不太熟悉,在此總結一下。

不同級別

1. 在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。

2.作為style屬性寫在元素內的樣式

3.id選擇器

4.類選擇器

5.標籤選擇器

6.萬用字元選擇器

7.瀏覽器自定義

同一級別

同一級別中後寫的會覆蓋先寫的樣式

選擇器

含義

*通用元素選擇器,匹配頁面任何元素(這也就決定了我們很少使用)

#idid選擇器,匹配特定id的元素

.class

類選擇器,匹配class包含(不是等於)特定類的元素

element

標籤選擇器

*

#test

.staus

div

選擇器

含義

e,f多元素選擇器,用」,分隔,同時匹配元素e或元素f

e f後代選擇器,用空格分隔,匹配e元素所有的後代(不只是子元素、子元素向下遞迴)元素f

e>f

子元素選擇器,用」>」分隔,匹配e元素的所有直接子元素

e+f直接相鄰選擇器,匹配e元素之後相鄰同級元素f

e~f普通相鄰選擇器(弟弟選擇器),匹配e元素之後同級元素f(無論直接相鄰與否)

.class1.class2

這個姑且也算乙個吧,沒什麼名字,匹配類名中既包含class1又包含class2的元素

我就不一一舉例子了,選擇器並不是只能寫兩層,發現有些小朋友有這種誤解,認為只能寫e>f這樣的,我們寫可以寫e>f.class element這樣,你要你搞得定優先順序

選擇器

含義

e[attr]

匹配所有具有屬性attr的元素,div[id]就能取到所有有id屬性的div

e[attr=value]

匹配屬性attr值為value的元素,div[id=test],匹配id=test的div

e[attr~=value]

匹配所有屬性attr具有多個空格分隔、其中乙個值等於value的元素

e[attr|=value]

匹配所有att屬性具有多個」-」分隔、其中乙個值以value開頭的元素,主要用於lang屬性,比如「en」、「en-us」

e[attr ^=value]

匹配屬性attr的值以value開頭的元素

e[attr $=value]

匹配屬性attr的值以value結尾的元素

e[attr *=value]

匹配屬性attr的值包含value的元素

選擇器

含義

e:first-child

匹配元素e的第乙個子元素

e:link

匹配所有未被點選的鏈結

e:visited

匹配所有已被點選的鏈結

e:active

匹配滑鼠已經其上按下、還沒有釋放的e元素

e:hover

匹配滑鼠懸停其上的e元素

e:focus

匹配獲得當前焦點的e元素

e:lang(c)

匹配lang屬性等於c的e元素

e:enabled

匹配表單中可用的元素

e:disabled

匹配表單中禁用的元素

e:checked

匹配表單中被選中的radio或checkbox元素

e::selection

匹配使用者當前選中的元素

e:root

匹配文件的根元素,對於html文件,就是html元素

e:nth-child(n)

匹配其父元素的第n個子元素,第乙個編號為1

e:nth-last-child(n)

匹配其父元素的倒數第n個子元素,第乙個編號為1

e:nth-of-type(n)

與:nth-child()作用類似,但是僅匹配使用同種標籤的元素

e:nth-last-of-type(n)

與:nth-last-child() 作用類似,但是僅匹配使用同種標籤的元素

e:last-child

匹配父元素的最後乙個子元素,等同於:nth-last-child(1)

e:first-of-type

匹配父元素下使用同種標籤的第乙個子元素,等同於:nth-of-type(1)

e:last-of-type

匹配父元素下使用同種標籤的最後乙個子元素,等同於:nth-last-of-type(1)

e:only-child

匹配父元素下僅有的乙個子元素,等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)

e:only-of-type

匹配父元素下使用同種標籤的唯一乙個子元素,等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

e:empty

匹配乙個不包含任何子元素的元素,文字節點也被看作子元素

e:not(selector)

匹配不符合當前選擇器的任何元素

選擇器

含義

e:first-line

匹配e元素內容的第一行

e:first-letter

匹配e元素內容的第乙個字母

e:before

在e元素之前插入生成的內容

e:after

在e元素之後插入生成的內容

十分鐘搞定pandas

本文是對pandas官方 上 10 minutes to pandas 的乙個簡單的翻譯,原文在這裡。這篇文章是對pandas的乙個簡單的介紹,詳細的介紹請參考 cookbook 習慣上,我們會按下面格式引入所需要的包 可以通過 data structure intro setion 來檢視有關該節...

課間十分鐘

時間限制 1000 ms 記憶體限制 128 mb 兩人都是數學愛好者,便發明了乙個遊戲。在遊戲開始前,他們先約定乙個正整數n,同時令m 1。遊戲過程中,每個人都可以將m的值擴大2到9中的任意倍數。第乙個使m n的人就是最後的贏家。181818181818和zbt都十分聰明,並且遊戲過程中都使用最佳...

十分鐘搞定介面功能測試

coding utf 8 import requests 獲取驗證碼 2.6.1 android mac a4 c1 a0 5a 07 c9 uuid 34ea2bb748b26643f6093b39b8a144 print 獲取驗證碼 payload r requests.post http 伺服...