其實我現在寫的這些博文筆記都是我很早之前學習的時候所寫的筆記，只不過之前是沒有寫部落格的習慣，所以都是寫在word文件中個人需要的時候看而已。最近剛剛開了部落格，所以想將自己的筆記貼到部落格。
但是現在看來我的筆記中好多東西都過於基礎，其實放到部落格也是沒有多大的作用，於是我就想將我在開發當中遇到的一些有趣的案例以及結合我的筆記重新寫乙份
如果要介紹css的選擇器，那麼肯定會遇到乙個問題，那就是權重問題，所以本博文分為三個部分，第乙個部分是詳細介紹了目前css的選擇器有哪些以及用法，第二部分則是介紹一下關於權重的問題，第三部分就是我開發中遇到的一些好玩的案例
第一部分：css選擇器介紹
1.後代選擇器
選擇器例子
例子描述
csselement element
div p
選擇元素內部的所有
element>element
div>p
選擇父元素為元素的所有子代
元素:only-child
p:only-child
匹配屬於父元素中唯一的元素，如果其父元素中含有其他元素，那將不會被匹配
:nth-child(n)
p:nth-child(2)
匹配父元素中的第2個子元素，n可以是數字、關鍵字或公式。odd和even是可用於匹配下標奇數或偶數的子元素。第乙個子元素下標是1
:nth-last-child(n)
p:nth-last-child(2)
同上，只不過從最後乙個子元素開始計數
:first-child
p:first-child
選擇屬於父元素的第乙個子元素的每個元素，第乙個子元素必須是p
:root
:root
選擇文件的根元素
:empty
p:empty
選擇沒有子元素的每個元素(包括文字節點)
這裡想提的是:first-child選擇器，因為本人前期也犯過這樣子的錯誤，對這個選擇器的理解有一定的誤區，後來經過實踐後才發現這個坑。這個標籤要同時滿足兩個條件：1.子元素中存在你所選的標籤 2.你所選的這個子標籤必須是第乙個子標籤。
為了讓大家明白這個，我就舉個例子
右側是執行結果
如圖可知，p在div下的p標籤也是第乙個p標籤，這裡要清楚，我說的是第乙個p標籤並不是第乙個子標籤，a標籤才是第乙個子標籤。所以此刻a:first-child選擇器才是有效的。
:only-child選擇同樣也是得滿足兩個條件
2.同輩級別選擇器
選擇器例子
例子描述
csselement+element
div+p
選擇緊接在元素之後的元素
element~element2
p~ul
選擇前面有元素的每個元素
:first-of-type
p:first-of-type
匹配同級兄弟元素中的第乙個元素
:last-of-type
p:last-of-type
匹配同級兄弟元素中的最後乙個元素
:only-of-type
p:only-of-type
匹配屬於同型別中只有唯一兄弟元素的p元素
:nth-of-type(n)
p:nth-of-type(2)
匹配同型別中的第n個同級兄弟元素p
:nth-last-of-type(n)
p:nth-last-of-type(2)
同上，只不過從最後乙個開始計數
這裡將說一下+與~的區別
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
選擇每個元素的首字母
1:first-line
p:first-line
選擇每個元素的首行
1:before
p:before
在每個元素的內容之前插入內容
2:after
p:after
在每個元素的內容之後插入內容
2:target
#news:target
選擇當前活動的#news元素
3:root
:root
選擇文件的根元素
3所謂了偽類選擇器有一部分是行為改變的css選擇器，其實這些選擇器的用處是十分大的。甚至它可以替代一些js的事件操作。比如：hover、：active以及:focus等選擇器，這些選擇器有時在利用的時候是可以替代js的一些事件的。還有就是平時用的比較多的::after以及::before偽類選擇器，這兩個選擇是個很獨特的選擇器。他可以在你選擇的標籤中往標籤裡面新增乙個元素並且不會影響到文件的其他元素。這裡切記是在你選擇的標籤裡面插入。而且插入的是行內元素。在開發的過程中經常使用這兩個偽類選擇器去做一些有趣的東西。在後面的案例中我會用到這個偽類選擇器。
4.屬性選擇器
屬性選擇器是乙個不錯的過濾選擇器，在開發過程中我們會經常遇到一些相同的標籤顯示不同狀態的時候，這時候可以使用屬性選擇器來將他們區分。
選擇器例子
例子描述
css[attribute]
[target]
選擇帶有target屬性所有元素
[attribute=value]
[tar=_blank]
選擇target=」_blank」的所有元素
[attribute~=value]
[title~=flower]
選擇title屬性包含單詞」flower」的所有元素
[attribute|=value]
[lang|=en]
選擇lang屬性值以」en」開頭的所有元素
選擇其src屬性值以」https」開頭的每個元素
[attribute$=value]
a[src=」.pdf」]
選擇器src以」.pdf」結尾的所有元素
[attribute*=value]
a[src*=」abc」]
選擇其src屬性包含」abc」子串的每個元素
有圖是執行結果
5.ui偽類選擇器
選擇器例子
例子描述
css:enabled
input:enabled
選擇每個啟用的元素
:disabled
input:disabled
選擇每個禁用的元素
:checked
input:checked
選擇每個被選中的元素
:not(selector)
:not(p)
選擇非元素的每個元素
::selection
::section
選擇被使用者選取的元素部分
這就是第一部分的所有要介紹的選擇器
css排雷第一部分
import url basic.css warning urgent plant moons plant moons 1 a href span title feature lang en 選出屬性等於lang或者以lang開頭的所有元素。選擇h1 strong 可以解釋為選擇h1字元素中的所有s...
Axure RP 第一部分
axure rp是乙個專業的快速原型設計工具。axure 發音 ack sure 代表美國axure公司 rp則是rapid prototyping 快速原型 的縮寫。axure rp是美國axure software solution公司旗艦產品，是乙個專業的快速原型設計工具，讓負責定義需求和規格...
jquery選擇器用法筆記（第一部分）
由於我在專案中用jquery比較多，而且覺得jquery真的很不錯，尤其是其靈活高效的選擇器更是令人無法忘懷。那麼，今天就來寫一篇非常基礎的關於jquery選擇器的文章，路過的朋友可以收藏以作參考。1 選取所有元素 選擇器選取文件中的每個單獨的元素，包括 html head 和 body。如果與其他...