CSS選擇器

Bryan 發(fā)布于2019-04-23 13:13 / 1925人閱讀

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

!---問題---!
　　1.css的全稱是什么？
　　　　Cascading style sheets
　　2.樣式表的組成
　　　　規(guī)則
　　　　　　選擇器+聲明塊
　　　　　　　　聲明
　　　　　　　　　　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.基本選擇器擴(kuò)展
　　子元素選擇器　　? #wrap > .inner {color: pink;}
　　　　也可稱為直接后代選擇器,此類選擇器只能匹配到直接后代，不能匹配到深層次的后代元素
　　相鄰兄弟選擇器　　 #wrap #first + .inner {color: #f00;}
　　　　它只會匹配緊跟著的兄弟元素
　　通用兄弟選擇器　　 #wrap #first ~ div { border: 1px solid;}
　　　　它會匹配所有的兄弟元素(不需要緊跟)
　　選擇器分組　　? h1,h2,h3{color: pink;}
　　　　此處的逗號我們稱之為結(jié)合符

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結(jié)尾（包括val）的元素。
　　　　[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。

4.偽類與偽元素選擇器
　　偽類是為了拿到DOM樹以外的動態(tài)
　　偽元素是為了拿到DOM樹以外的元素

　　鏈接偽類　　? 注意:link，:visited，:target是作用于鏈接元素的！
　　　　:link 表示作為超鏈接，并指向一個未訪問的地址的所有錨
　　　　:visited 表示作為超鏈接，并指向一個已訪問的地址的所有錨
　　　　:target 代表一個特殊的元素，它的id是URI的片段標(biāo)識符(#后面的內(nèi)容)
　　動態(tài)偽類　　? 注意:hover，:active基本可以作用于所有的元素！
　　　　:hover 表示懸浮到元素上
　　　　:active 表示匹配被用戶激活的元素（點擊按住時）

　　　　由于a標(biāo)簽的:link和:visited可以覆蓋了所有a標(biāo)簽的狀態(tài)，所以當(dāng):link，:visited，:hover，:active同時出現(xiàn)在a標(biāo)簽
　　　　身上時 :link和:visited不能放在最后！！！

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

　　結(jié)構(gòu)性偽類
　　　　index的值從1開始計數(shù)！！！！
　　　　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有一個很重要的區(qū)別！！
　　　　　　　　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(內(nèi)容必須是空的，有空格都不行，有attr沒關(guān)系)
　　偽元素
　　　　::after
　　　　::before
　　　　::firstLetter
　　　　::firstLine
　　　　::selection

　　5.css聲明的優(yōu)先級
　　　　選擇器的特殊性
　　　　　　選擇器的特殊性由選擇器本身的組件確定，特殊性值表述為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.結(jié)合符對選擇器特殊性沒有一點貢獻(xiàn)
　　　　　　　　6.內(nèi)聯(lián)聲明的特殊性都是1,0,0,0
　　　　　　　　7.繼承沒有特殊性

　　　　　　特殊性 1,0,0,0 大于所有以0開頭的特殊性(不進(jìn)位)
　　　　　　選擇器的特殊性最終都會授予給其對應(yīng)的聲明
　　　　　　如果多個規(guī)則與同一個元素匹配，而且有些聲明互相沖突時，特殊性越大的越占優(yōu)勢

　　　　　　注意：id選擇器和屬性選擇器
　　　　　　　　div[id="test"]（0,0,1,1）和 #test（0,1,0,0）
　　　　重要聲明
　　　　　　有時某個聲明比較重要，超過了所有其他聲明，css2.1就稱之為重要聲明
　　　　　　并允許在這些聲明的結(jié)束分號之前插入 !important 來標(biāo)志
　　　　　　必須要準(zhǔn)確的放置 !important 否則聲明無效。
　　　　　　!important 總是要放在聲明的最后，即分號的前面

　　　　　　標(biāo)志為 !important的聲明并沒有特殊的特殊性值，不過要與非重要聲明分開考慮。
　　　　　　實際上所有的重要聲明會被瀏覽器分為一組，重要聲明的沖突會在其內(nèi)部解決
　　　　　　非重要聲明也會被分為一組，非重要聲明的沖突也會在其內(nèi)部解決
　　　　　　如果一個重要聲明與非重要聲明沖突，勝出的總是重要聲明
　　　　繼承
　　　　　　繼承沒有特殊性，甚至連0特殊性都沒有
　　　　　　0特殊性要比無特殊性來的強(qiáng)
　　　　來源
　　　　　　css樣式的來源大致有三種
　　　　　　創(chuàng)作人員
　　　　　　讀者
　　　　　　用戶代理

　　　　權(quán)重：
　　　　　　讀者的重要聲明
　　　　　　創(chuàng)作人員的重要聲明
　　　　　　創(chuàng)作人員的正常聲明
　　　　　　讀者的正常聲明
　　　　　　用戶代理的聲明
　　　　層疊
　　　　　　1.找出所有相關(guān)的規(guī)則，這些規(guī)則都包含一個選擇器
　　　　　　2.計算聲明的優(yōu)先級
　　　　　　　　先按來源排序
　　　　　　　　在按選擇器的特殊性排序
　　　　　　　　最終按順序