選擇器類型
基礎(chǔ)選擇器
組合選擇器
屬性選擇器
偽類選擇器
偽元素選擇器
基礎(chǔ)選擇器
選擇器 含義
1、* 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
* {
border:3px solid red;
}
2、#id id選擇器，匹配特定id的元素
#id-selector{
color: #333;
}
3、.class 類選擇器，匹配class包含(不是等于)特定類的元素
.class-selector{
background: #ccc;
}
id定位于頁面上的唯一的元素，頁面上的元素是獨(dú)一無二的就用id，一個頁面你上不要出現(xiàn)相同
id的兩個元素，這樣是不符合HTML規(guī)范的
class定位于頁面上的某一類元素
4、element 標(biāo)簽選擇器
p {
font-size: 20px;
}
組合選擇器：
選擇器 含義
1、E,F 多元素選擇器，用,分隔，同時匹配元素E或元素F
并列選擇器：
.p1,.p2 {
color:red;
}
2、E F 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
后代選擇器：
#ct .p2{
color:blue;
}
3、E>F 子元素選擇器，用>分隔，匹配E元素的所有直接子元素
#ct> .p3{
color:blue;
}
4、E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
.p1+p{
color:red;
}
顯示p中的結(jié)果是紅色
5、E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
.p1~p{
color:red;
}
6、.class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素
h2.p2{
color:red
}
7、element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素
屬性選擇器
選擇器 含義
E[attr] 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
E[attr = value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素
E[attr ^= value] 匹配屬性attr的值以value開頭的元素
E[attr $= value] 匹配屬性attr的值以value結(jié)尾的元素
E[attr *= value] 匹配屬性attr的值包含value的元素
input[type="password"]{
width:200px;
}
去匹配屬性值為password的元素。
偽類選擇器
選擇器 含義
E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
a:hover{
color:blue;
}
a鏈接上常見的有l(wèi)ink,visited,active,hover.
樣式覆蓋的舉例
a{
color:red;
}
a:visited{
color:black;
}
a:hover{
color:blue;
}
a:active{
color:yellow;
}
E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素
E:lang(c) 匹配lang屬性等于c的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當(dāng)前選中的元素
E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個子元素，第一個編號為1
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一個不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素
E:not(selector) 匹配不符合當(dāng)前選擇器的任何元素
n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even
舉例：
.child:first-child{
color:red;
}
.child:first-of-type{
background:blue;
}
.child:nth-of-type(2){
background:yellow;
}
偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個字母
E::before 在E元素之前插入生成的內(nèi)容
.wrap::before{
content:'aa';
}
對于這種偽元素，必須要用content，在.wrap元素內(nèi)部生成一個元素，
這個就相當(dāng)于他里面的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
.wrap::after{
content:'bbb'
}
在元素后面，生成‘bbb’
選擇器優(yōu)先級
如果多條規(guī)則作用于同一個元素上，且定義的相同屬性的不同值，比如
<style>
#test {color: #666;}
p {color: #333;}
</style>
<p id="text">Text</p>
這種場景下，p元素文本顏色應(yīng)該是哪個呢？
顏色是#666，因?yàn)?test的優(yōu)先級要高于p
CSS優(yōu)先級
從高到低分別是
在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
復(fù)雜場景
#test p.class1 {...}
#test .class1.class2 {...}
行內(nèi)樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器、偽元素 ==> d
小測試
* {} /* a=0 b=0 c=0 d=0 -> 0,0,0,0 */
p {} /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover {} /* a=0 b=0 c=0 d=2 -> 0,0,1,1 */
ul li {} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{} /* a=0 b=0 c=1 d=2 -> 0,0,1,1 */
ul ol li.active {} /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p {} /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after {} /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */
樣式覆蓋
div {color: #333;}
....
div {color: #666;}
這樣div文案的顏色明顯會是#666
下面的會覆蓋上面的
選擇器使用經(jīng)驗(yàn)
1.遵守 CSS 書寫規(guī)范
2.使用合適的命名空間：不要隨便使用標(biāo)簽選擇器
#header .logo{
color:red
}
content .xxx{
}
3.合理的復(fù)用class
.layout{
width:300px;
}
如果layout很通用，就在HTML中需要的地方加class
