目錄
1. 基本選擇器
2. 層次（結(jié)構(gòu)）選擇器
3. 屬性選擇器
4. 偽類選擇器
5. 偽元素選擇器
一，基本選擇器
- 通配選擇器[ * ]
- 元素選擇器[Element]
- id選擇器[ #id ]
- 類選擇器 .class
- 群組選擇器【select1, select2, select3 ...】
*{margin: 0;padding: 0} //選擇頁面中的所有元素并設(shè)置margin和padding值為0
.demo *{background:#000} //選擇類名為demo的元素下面的所有元素并設(shè)置背景為黑色
ul{background:#fff} //選擇列表ul元素
#demo{do something}
ul.demo{do something} //這樣只會選擇有demo類名的ul元素
.section-1,.section-2,.section-3{do something} //給三個頁面元素定義公用的樣式
二 ，層次選擇器（結(jié)構(gòu)選擇器）
- 后代選擇器[ E F ]:會選擇E元素后代中的所有F元素，子代或者孫子代等
- 子元素選擇器[ E>F ]：會選擇E元素里面第一層級的元素（子代）
- 相鄰兄弟選擇器 [ E+F ]:E和F是同級元素，并且F緊跟在E后面
- 通用兄弟選擇器[ E~F ] :E和F有相同的父元素，并且F在E之后，E~F將選中E元素后面所有的F元素
<div class="parent">
<div class="child"></div>
<div class="child2">
<div class="c-child">
<div class="c-c-child"></div>
</div>
</div>
</div>
.parent div{do something} //會選擇parent里面的所有div，不管是子元素.child還是孫元素.c-child和.c-c-child
.parent > div{do something} //只會選擇.parent元素的直系子元素，也就是只會選擇到 .child元
.child +div{do something} //會選中class為child2的div元素
.child ~ div { do something }//會選中class 為 child2的div
三， 屬性選擇器（下面的E都是可以不帶的）
- 「 E[attr] 」：選擇有某個屬性的元素
- 「 E[attr=val] 」: 這個用來選取具有屬性值，并且屬性值為val的元素
- 「 E[attr|=val] 」: 用來選擇具有屬性attr且屬性的值為val或以val-開頭的元素(其中 - 是不可或缺的)
- 「 E[attr~=val] 」: 當(dāng)某個元素的某個屬性具有多個用空格隔開的屬性值，此時使用E[attr~=val]只要attr屬性多個屬性值中有一個于val匹配元素就會被選中
- 「 E[attr*=val] 」:用來選擇具有屬性attr并且只要屬性值中包含val字符串的元素。也就是說只要所選屬性中有val字符串，不管是不是多個用空格分隔的屬性值，都將被選中
- 「 E[attr^=val] 」:用來選擇屬性attr的屬性值是以val開頭的所有元素，注意它與E[attr|=val]的區(qū)別，attr|=val中-是必不可少的，也就是說以val-開頭
- 「 E[attr$=val] 」:這個選擇器剛好跟E[attr^=val]相反，用來選擇具有attr屬性且屬性值以val結(jié)尾的元素
html:
<div id="demo">
<a href="" id="test" title="test first"></a>
<a href="www.taobao.com" class="taobao web" title="second-test"></a>
<a href="#" id="show" title="testlink">
</div>
1, a[id]{ dosomething } //選擇1,3 a標(biāo)簽
2，a[id=test] { dosomething } //選擇了第一個a標(biāo)簽
3，a[title|=second]{ dosomething } //選擇了第二個a標(biāo)簽
4，a[ title~ = test]{ dosomething } //選擇了第一個a標(biāo)簽
5，a[ title*= test ]{dosomething } //會選擇1,2 a標(biāo)簽
6，a[ href^ = http] {do} //會選擇第二個a標(biāo)簽
7，a[ href$= com ]{do } //會選擇第二個a標(biāo)簽
四 ，偽類選擇器
1， 動態(tài)偽類選擇器
1 E:link{do something} //選擇定義了超鏈接但鏈接還未被訪問過的元素
2 E:visited{do something} //選擇定義了超鏈接并且鏈接已經(jīng)被訪問過的元素
3 E:active{do something} //選擇匹配的E元素，且元素被激活，常用在錨點(diǎn)和按鈕上
4 E:hover{do something} //選擇鼠標(biāo)停留的匹配的E元素
5 E:focus{do something} //選擇匹配的E元素，且元素獲得焦點(diǎn)
2 ， 目標(biāo)偽類選擇器【E:target 】
這個玩意兒有點(diǎn)難理解查看這里的實(shí)例
感覺就是對于頁面內(nèi)的a標(biāo)簽的錨點(diǎn)有作用
3，語言偽類選擇器「E:lang(language)」：用來選擇指定了lang屬性的元素，其值為language
html:
<html lang="en-US"></html>
css:
:lang(en-US) {do something}
4，狀態(tài)偽類選擇器:「E:checked,E:enabled,E:disabled」
E:checked{do something} //匹配表單中被選中的單選按鈕或復(fù)選按鈕
E:enabled{do something} //匹配所有起用的表單元素
E:disabled{do something} //匹配所有禁用的表單元素
5，結(jié)構(gòu)偽類選擇器
E:first-child：用來選取特定元素的第一個子元素
E:last-child：用來選取特定元素的最后一個子元素
E:root：用來匹配元素E所在的文檔中的根元素，在html文檔中根元素就始終是html
E:nth-child(n)：選取某個父元素的一個或多個特定的子元素，其中的n可以是數(shù)值(從1開始)，也可以是包含n的表達(dá)式，也可以是odd(奇數(shù))，even(偶數(shù))
E:nth-last-child(n)：使用方法于E:nth-child()是相同的，不同的是E:nth-last-child()選擇的元素是從父元素的最后一個子元素開始算起
E:nth-of-type(n)：只計算父元素中指定的某種類型的子元素，當(dāng)某個元素的子元素類型不只是一種時，使用nth-of-type來選擇會比較有用
E:nth-last-of-type(n)：用法同E:nth-of-type()相同，不同的是:nth-last-of-type()也是從父元素的最后一個子元素開始算起
E:first-of-type：類似于:first-child和:last-child，不同的就是指定了元素的類型
E:last-of-type：類似于:first-child和:last-child，不同的就是指定了元素的類型
E:only-child：匹配的元素E是其父元素的唯一子元素，也就是說匹配元素的父元素只有一個子元素
E:only-of-type：用來選擇一個元素，他的這種類型的元素的個數(shù)在他父元素的所有子元素中是一個，[查看例子](https://segmentfault.com/a/1190000003088878)
E:empty：用來選擇沒有任何內(nèi)容的元素，哪怕是一個空格都沒有的元素
實(shí)例
html:
<ul>
<li>1</li>
<li>2</li>
<div>3</div> <div>4</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
ul > li:first-child {do something} //用來選取ul中的第一個li元素
ul > li:last-child {do something} //用來選取ul中的最后一個li元素
ul > li:nth-child(2n+1) {do something} //用來選取ul中的第2n+1(奇數(shù))個元素,不管是不是li元素
ul > li:nth-of-type(3){do something} //會選中內(nèi)容為5的li元素
ul > li:first-of-type{do something} //會選中內(nèi)容為1的li元素
**注意 ul > li:nth-child(2n+1) {do something} //用來選取ul中的第2n+1(奇數(shù))個元素,不管是不是li元素 **
<div class="demo">
<p>1-1</p>
<p>1-2</p>
</div>
<div class="demo">
<p>2-1</p>
</div>
.demo > p:only-child{do something}//會選取到內(nèi)容為2-1的p元素
p:only-of-type { color: red;} //會選取2-1的p標(biāo)簽，因?yàn)閜類型的元素的父元素的子元素中p類型的元素只有一個的就是下面的p元素滿足
6，否定偽類選擇器：「E:not(F)」可以用來選取所有除了F外的所有元素。
input:not([type=submit]){do something} //可以用來給表單的所有input元素定義樣式，除了submit按鈕之外
偽元素選擇器
1，「::first-letter」::first-letter用來選擇文本塊的第一個字母,常用于文本排版方面。
2，「::first-line」::first-line用于匹配元素的第一行文本，也是常用于文本排版。
3，「::before,::after」
::before,::after同我們之前熟用的:before和:after使用方法相同，它們不是指存于標(biāo)記中的內(nèi)容，是配合使用content屬性可以插入額外內(nèi)容的位置，盡管生成的內(nèi)容不會成為DOM的一部分，但它同樣可以設(shè)置樣式。
4，「::selection」
css3新定義的偽元素::selection用來匹配突出顯示的文本。但是使用前需要確認(rèn)瀏覽器對它的支持程度。
瀏覽器默認(rèn)的情況下，我們選中的文本背景是藍(lán)色，字體是白色。通過使用::selection，我們可以改變它的效果
但是需要注意的是，::selection僅接受兩個屬性，一個是background，一個是color。
