css3 選取器 權重問題 （第一部分）

標籤：字母   led   cti   type   style   div   筆記   padding   錯誤   

 

其實我現在寫的這些博文筆記都是我很早之前學習的時候所寫的筆記，只不過之前是沒有寫部落格的習慣，所以都是寫在word文檔中個人需要的時候看而已。最近剛剛開了部落格，所以想將自己的筆記貼到部落格。

但是現在看來我的筆記中好多東西都過於基礎，其實放到部落格也是沒有多大的作用，於是我就想將我在開發當中遇到的一些有趣的案例以及結合我的筆記重新寫一份

如果要介紹css的選取器，那麼肯定會遇到一個問題，那就是權重問題，所以本博文分為三個部分，第一個部分是詳細介紹了目前css的選取器有哪些以及用法，第二部分則是介紹一下關於權重的問題，第三部分就是我開發中遇到的一些好玩的案例

第一部分：css選取器介紹

1.後代選取器

 

選取器	例子	例子描述	Css
Element Element	Div p	選擇<div>元素內部的所有<p元素>	1
Element>element	div>p	選擇父元素為<div>元素的所有子代<p>元素	2
:only-child	P:only-child	匹配屬於父元素中唯一的<p>元素，如果其父元素中含有其他元素，那將不會被匹配	3
:nth-child(n)	P:nth-child(2)	匹配父元素中的第2個<p>子項目，n可以是數字、關鍵字或公式。Odd和even是可用於匹配下標奇數或偶數的子項目。第一個子項目下標是1	3
:nth-last-child(n)	P:nth-last-child(2)	同上，只不過從最後一個子項目開始計數	3
:first-child	P:first-child	選擇屬於父元素的第一個子項目的每個<p>元素，第一個子項目必須是p	3
:root	:root	選擇文檔的根項目	3
:empty	P:empty	選擇沒有子項目的每個<p>元素(包括文本節點)	3

這裡想提的是:first-child選取器，因為本人前期也犯過這樣子的錯誤，對這個選取器的理解有一定的誤區，後來經過實踐後才發現這個坑。這個標籤要同時滿足兩個條件：1.子項目中存在你所選的標籤 2.你所選的這個子標籤必須是第一個子標籤。

為了讓大家明白這個，我就舉個例子

 右側是運行結果

 可知，p在div下的p標籤也是第一個p標籤，這裡要清楚，我說的是第一個p標籤並不是第一個子標籤，a標籤才是第一個子標籤。所以此刻a:first-child選取器才是有效。

:only-child選擇同樣也是得滿足兩個條件

2.同輩層級選取器

 

選取器	例子	例子描述	Css
Element+element	Div+p	選擇緊接在<div>元素之後的<p>元素	2
Element~element2	P~ul	選擇前面有<p>元素的每個<ul>元素	3
:first-of-type	P:first-of-type	匹配同級兄弟元素中的第一個<p>元素	3
:last-of-type	P:last-of-type	匹配同級兄弟元素中的最後一個<p>元素	3
:only-of-type	P:only-of-type	匹配屬於同類型中只有唯一兄弟元素的p元素	3
:nth-of-type(n)	P:nth-of-type(2)	匹配同類型中的第n個同級兄弟元素p	3
:nth-last-of-type(n)	P:nth-last-of-type(2)	同上，只不過從最後一個開始計數	3

這裡將說一下+與~的區別

div+p選中的是兄弟標籤，也就是緊跟在div後面的p標籤，這個p標籤滿足，是div的兄弟標籤，也就是緊跟在div後面，兩者間沒有其他標籤

  右邊是運行結果

 所視，使用+選取器的時候，a標籤後面的第一個p標籤字型會變紅。而~選取器的意思就是選中滿足前面擁有p標籤的a標籤（這裡前面擁有p標籤不一定是緊跟在a標籤前面）

3.偽類別選取器

 

選取器	例子	例子描述·	Css
:link	a:link	選擇所有未被訪問的連結	1
:visited	a:visited	選擇所有已被訪問的連結	1
:active	a:actied	選擇活動連結	1
:hover	A:hover	選擇滑鼠指標位於其上的連結	1
:focus	Input:focus	選擇獲得焦點的input元素	2
:first-letter	P:first-letter	選擇每個<p>元素的首字母	1
:first-line	P:first-line	選擇每個<p>元素的首行	1
:before	P:before	在每個<p>元素的內容之前插入內容	2
:after	P:after	在每個<p>元素的內容之後插入內容	2
:target	#news:target	選擇當前活動的#news元素	3
:root	:root	選擇文檔的根項目	3

所謂了偽類別選取器有一部分是行為改變的css選取器，其實這些選取器的用處是十分大的。甚至它可以替代一些js的事件操作。比如：hover、：active以及:focus等選取器，這些選取器有時在利用的時候是可以替代js的一些事件的。還有就是平時用的比較多的::after以及::before偽類別選取器，這兩個選擇是個很獨特的選取器。他可以在你選擇的標籤中往標籤裡面添加一個元素並且不會影響到文檔的其他元素。這裡切記是在你選擇的標籤裡面插入。而且插入的是行內元素。在開發的過程中經常使用這兩個偽類別選取器去做一些有趣的東西。在後面的案例中我會用到這個偽類別選取器。

4.屬性選取器

屬性選取器是一個不錯的過濾選取器，在開發過程中我們會經常遇到一些相同的標籤顯示不同狀態的時候，這時候可以使用屬性選取器來將他們區分。

 

 

選取器	例子	例子描述	Css
[attribute]	[target]	選擇帶有target屬性所有元素	2
[attribute=value]	[tar=_blank]	選擇target=”_blank”的所有元素	2
[attribute~=value]	[title~=flower]	選擇title屬性包含單詞”flower”的所有元素	2
[attribute|=value]	[lang|=en]	選擇lang屬性值以”en”開頭的所有元素	2
[attribute^=value]	a[src^=”https”]	選擇其src屬性值以”https”開頭的每個<a>元素	3
[attribute$=value]	a[src=”.pdf”]	選取器src以”.pdf”結尾的所有<a>元素	3
[attribute*=value]	a[src*=”abc”]	選擇其src屬性包含”abc”子串的每個<a>元素	3

這裡舉個例子，就像我們平時看到下載檔案時，一些連結表徵圖會區分這些檔案的類型，就是不同的類型檔案會顯示不同的表徵圖(icon)，這個如果使用這個屬性的話就很方便的做出來了

有圖是運行結果

5.ui偽類別選取器

                                     

選取器	例子	例子描述	Css
:enabled	Input:enabled	選擇每個啟用的<input>元素	3
:disabled	Input:disabled	選擇每個禁用的<input>元素	3
:checked	Input:checked	選擇每個被選中的<input>元素	3
:not(selector)	:not(p)	選擇非<p>元素的每個元素	3
::selection	::section	選擇被使用者選取的元素部分	3

這就是第一部分的所有要介紹的選取器

 

css3 選取器 權重問題 （第一部分）