CSS選擇器

###CSS選擇器
CSS3選擇器規範地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3選擇最新選擇器規範: https://www.w3.org/TR/selectors

!---問題---!
　　1.css的全稱是什麼？
　　　　Cascading style sheets
　　2.樣式表的組成
　　　　規則
　　　　　　選擇器+聲明塊
　　　　　　　　聲明
　　　　　　　　　　CSS合法的屬性名+屬性值
　　3.瀏覽器讀取編譯css的順序？
　　　　從右到左

1.基本選擇器

　　通配符選擇器　　* { margin: 0; padding: 0; border: none; }
　　元素選擇器　　   body { background: #eee; }
　　類選擇器　　　　.list { list-style: square; }
　　ID選擇器　　　　#list { width: 500px; margin: 0 auto; }
　　後代選擇器　　  .list li { margin-top: 10px; background: #abcdef; }


2.基本選擇器擴展
　　子元素選擇器　　  #wrap > .inner {color: pink;}
　　　　也可稱爲直接後代選擇器,此類選擇器只能匹配到直接後代，不能匹配到深層次的後代元素
　　相鄰兄弟選擇器　　 #wrap #first + .inner {color: #f00;}
　　　　它只會匹配緊跟着的兄弟元素
　　通用兄弟選擇器　　 #wrap #first ~ div { border: 1px solid;}
　　　　它會匹配全部的兄弟元素(不須要緊跟)
　　選擇器分組　　  h1,h2,h3{color: pink;}
　　　　此處的逗號咱們稱之爲結合符


3.屬性選擇器
　　存在和值屬性選擇器
　　　　[attr]：該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。
　　　　[attr=val]：該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。
　　　　[attr~=val]：表示帶有以 attr 命名的屬性的元素，而且該屬性是一個以空格做爲分隔的值列表，其中至少一個值爲val。

　　子串值屬性選擇器
　　　　[attr|=val] : 選擇attr屬性的值是val（包括val）或以val-開頭的元素。
　　　　[attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。
　　　　[attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。
　　　　[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。


4.僞類與僞元素選擇器
　　僞類是爲了拿到DOM樹之外的動態
　　僞元素是爲了拿到DOM樹之外的元素

　　連接僞類　　  注意:link，:visited，:target是做用於連接元素的！
　　　　:link 表示做爲超連接，並指向一個未訪問的地址的全部錨
　　　　:visited 表示做爲超連接，並指向一個已訪問的地址的全部錨
　　　　:target 表明一個特殊的元素，它的id是URI的片斷標識符(#後面的內容)
　　動態僞類　　  注意:hover，:active基本能夠做用於全部的元素！
　　　　:hover 表示懸浮到元素上
　　　　:active 表示匹配被用戶激活的元素（點擊按住時）

　　　　因爲a標籤的:link和:visited能夠覆蓋了全部a標籤的狀態，因此當:link，:visited，:hover，:active同時出如今a標籤
　　　　身上時 :link和:visited不能放在最後！！！

　　　　隱私與:visited選擇器
　　　　　　只有下列的屬性才能被應用到已訪問連接：
　　　　　　　　color
　　　　　　　　background-color
　　　　　　　　border-color
　　表單相關僞類
　　　　:enabled 匹配可編輯的表單
　　　　:disable 匹配被禁用的表單
　　　　:checked 匹配被選中的表單
　　　　:focus 匹配獲焦的表單

　　結構性僞類
　　　　index的值從1開始計數！！！！
　　　　index能夠爲變量n(只能是n)
　　　　index能夠爲even odd
　　　　　　#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 這個子元素必須是ele
　　　　　　#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
　　　　　　除此以外:nth-child和:nth-of-type有一個很重要的區別！！
　　　　　　　　nth-of-type以元素爲中心！！！

　　　　:nth-child(index)系列
　　　　　　:first-child
　　　　　　:last-child
　　　　　　:nth-last-child(index)
　　　　　　:only-child (相對於:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
　　　　:nth-of-type(index)系列
　　　　　　:first-of-type
　　　　　　:last-of-type
　　　　　　:nth-last-type(index)
　　　　　　:only-of-type (相對於:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

　　　　:not
　　　　:empty(內容必須是空的，有空格都不行，有attr不要緊)
　　僞元素
　　　　::after
　　　　::before
　　　　::firstLetter
　　　　::firstLine
　　　　::selection


　　5.css聲明的優先級
　　　　選擇器的特殊性
　　　　　　選擇器的特殊性由選擇器自己的組件肯定，特殊性值表述爲4個部分，如 0,0,0,0
　　　　　　一個選擇器的具體特殊性以下肯定：
　　　　　　　　1.對於選擇器中給定的ID屬性值，加 0,1,0,0
　　　　　　　　2.對於選擇器中給定的各個類屬性，屬性選擇，或僞類，加 0,0,1,0
　　　　　　　　3.對於選擇器中的給定的各個元素和僞元素，加0,0,0,1
　　　　　　　　4.通配符選擇器的特殊性爲0,0,0,0
　　　　　　　　5.結合符對選擇器特殊性沒有一點貢獻
　　　　　　　　6.內聯聲明的特殊性都是1,0,0,0
　　　　　　　　7.繼承沒有特殊性

　　　　　　特殊性 1,0,0,0 大於全部以0開頭的特殊性(不進位)
　　　　　　選擇器的特殊性最終都會授予給其對應的聲明
　　　　　　若是多個規則與同一個元素匹配，並且有些聲明互相沖突時，特殊性越大的越佔優點

　　　　　　注意：id選擇器和屬性選擇器
　　　　　　　　div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）
　　　　重要聲明
　　　　　　有時某個聲明比較重要，超過了全部其餘聲明，css2.1就稱之爲重要聲明
　　　　　　並容許在這些聲明的結束分號以前插入 !important 來標誌
　　　　　　必需要準確的放置 !important 不然聲明無效。
　　　　　　!important 老是要放在聲明的最後，即分號的前面

　　　　　　標誌爲 !important的聲明並無特殊的特殊性值，不過要與非重要聲明分開考慮。
　　　　　　實際上全部的重要聲明會被瀏覽器分爲一組，重要聲明的衝突會在其內部解決
　　　　　　非重要聲明也會被分爲一組，非重要聲明的衝突也會在其內部解決
　　　　　　若是一個重要聲明與非重要聲明衝突，勝出的老是重要聲明
　　　　繼承
　　　　　　繼承沒有特殊性，甚至連0特殊性都沒有
　　　　　　0特殊性要比無特殊性來的強
　　　　來源
　　　　　　css樣式的來源大體有三種
　　　　　　創做人員
　　　　　　讀者
　　　　　　用戶代理

　　　　權重：
　　　　　　讀者的重要聲明
　　　　　　創做人員的重要聲明
　　　　　　創做人員的正常聲明
　　　　　　讀者的正常聲明
　　　　　　用戶代理的聲明
　　　　層疊
　　　　　　1.找出全部相關的規則，這些規則都包含一個選擇器
　　　　　　2.計算聲明的優先級
　　　　　　　　先按來源排序
　　　　　　　　在按選擇器的特殊性排序
　　　　　　　　最終按順序

---

 

注：轉自尚硅谷筆記