在最近的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 伺服...