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

 

其實我如今寫的這些博文筆記都是我很早以前學習的時候所寫的筆記，只不過以前是沒有寫博客的習慣，因此都是寫在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

這就是第一部分的全部要介紹的選擇器