首先先捋一捋都有哪些選擇器
1、通配符選擇器
? 舉例? ?
????? *{width:100px;}
2、元素選擇器
????（在 W3C 標(biāo)準(zhǔn)中，元素選擇器又稱(chēng)為類(lèi)型選擇器，看清楚啦是類(lèi)型選擇選器，區(qū)別于類(lèi)選擇器）
? 舉例
????h1 { color:black; }
3、類(lèi)選擇器
? ???舉例
????<h1 class="important">我是標(biāo)題</h1>
????<p class="important">我是段落</p>
????<p class="important">我是段落</p>
????<p class="important?urgent ">我是段落</p>
????.important{ color:red; }? ?
????*.important {color:red;}?表示匹配 class 屬性包含 important 的所有元素（通配符+類(lèi)選擇器）
????p.important {color:red;} 表示匹配 class 屬性包含 important 的所有 p 元素（元素+類(lèi)選擇器）
????.important .urgent{color:red;} （多類(lèi)選擇器）
4、ID選擇器
舉例
<p id="intro">This is a paragraph of introduction.</p>
#intro {font-weight:bold;}
5、后代選擇器
????后代選擇器有一個(gè)易被忽視的方面，即兩個(gè)元素之間的層次間隔可以是無(wú)限的。
? ? 舉例
????h1 em { color:red;}
6、子元素選擇器
? ??舉例
? ??h1>strong {color:red;}
7、相鄰兄弟元素選擇器
? ??舉例
????h1 + p {margin-top:50px;}
? ??選擇緊接在 h1 元素后出現(xiàn)的段落，h1 和 p 元素?fù)碛泄餐母冈?/p>
8、通用兄弟選擇器
? ??h1 ~ p {
? ? ????width:200px;
? ? ? ? height:200px;
? ? ????background-color:red;
????}
9、群組選擇器
? ??section > article,
????section > aside,
????section > div {
? ? ???? color: #f00;
? ? ???? margin-top: 10px;
? ????? background: #abcdef;
????}
10、屬性選擇器
? ??[attribute] 用于選取帶有指定屬性的元素。
????[attribute=value] 用于選取帶有指定屬性和值的元素。
????[attribute~=value] 用于選取屬性值中包含指定詞匯的元素。
????[attribute|=value] 用于選取帶有以指定值開(kāi)頭的屬性值的元素，該值必須是整個(gè)單詞。
????[attribute^=value] 匹配屬性值以指定值開(kāi)頭的每個(gè)元素。
????[attribute$=value] 匹配屬性值以指定值結(jié)尾的每個(gè)元素。
????[attribute*=value] 匹配屬性值中包含指定值的每個(gè)元素。
? ??p[class~="important"]{ color: red;}
????可以應(yīng)用樣式：
????無(wú)法應(yīng)用樣式：
11、偽類(lèi)選擇器
? ? ?A、動(dòng)態(tài)偽類(lèi) （這些偽類(lèi)并不存在HTML中，只有當(dāng)用戶(hù)和網(wǎng)站交互的時(shí)候才能體現(xiàn)）
? ? ? ? ? ?錨點(diǎn)偽類(lèi)（:link[ 未訪(fǎng)問(wèn)鏈接 ]? :visited[ 已訪(fǎng)問(wèn)鏈接 ]）
? ? ? ? ? ?用戶(hù)行為偽類(lèi)(:hover [ 當(dāng)鼠標(biāo)懸停 ] :active[ 正在進(jìn)行的被選擇的鏈接 ] :focus[ 規(guī)定獲得焦點(diǎn)的輸入字段的顏色 輸入框內(nèi)的顏色] )
? ? ?B、UI元素狀態(tài)偽類(lèi)(css3新增)
? ? ? ?????:enabled（表單可選中）?
? ? ? ? ????????input：enabled{}? ?
????????????:disabled（表單不可選中disabled=“disabled”）??
? ? ?? ? ? ? ????input：disabled{}
????????????:checked
? ? ? C、CSS結(jié)構(gòu)類(lèi)
?????????type類(lèi)的就是數(shù)數(shù)的時(shí)候不管什么元素都一起算個(gè)數(shù)
? ? ? ? :first-child【父元素的首個(gè)以及最后一個(gè)子元素】
? ? ? ? ? ? ????section > div:first-child {color: #f00;}
? ? ? ? ? ????? 配合前面的元素去寫(xiě) 否則很容易亂
? ? ? ? ? ? ? ? :last-child、
? ? ? ? ? ? ? ? 某元素的最后一個(gè)元素
? ? ? ? :nth-child ( n )
? ? ? ? ? ? 無(wú)論元素類(lèi)型 ，匹配屬于其父元素的第n個(gè)元素
? ? ? ? （2n）even偶數(shù) （2n+1）odd奇數(shù)
? ? ? ? :nth-last-child( )
? ? ? ? ? ? 無(wú)論元素類(lèi)型 ，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)，且從1開(kāi)始計(jì)數(shù)
? ? ? ? ?:nth-of-type( )
? ? ? ? ? ? 匹配屬于父元素的特定類(lèi)型的第n個(gè)子元素的每個(gè)元素
????????????????【如果指定div? 那就只數(shù)div? 不管還有什么元素】
? ? ? ? ? :nth-last-of-type( )
? ? ? ? ? ? ? ? 如果指定div? 那就只數(shù)div? 不管還有什么元素 倒數(shù)的哦
? ? ? ? ? :first-of-type、:last-of-type（正數(shù)）
? ? ? ? ? :only-child、
? ? ? ? ? ? 匹配屬于其父元素唯一子元素的每個(gè)元素 同一個(gè)父元素中有其他兄弟元素也不行
? ? ? ? ? ?:only-of-type、
? ? ? ? ? ? 有兄弟元素也沒(méi)關(guān)系啦? 只要父元素里指定的元素只有一個(gè)就好啦
? ? ? ? ????????:empty
? ? ? ? ? ? ? ? ????div:empty {background: #f00; }
? ? ? ? ? ? ? ? 把空的找出來(lái) 就可以給樣式啦
????????否定選擇器，被選中的 執(zhí)行
? ? ? ? ? ? ? ? 舉例
? ? ? ? ? ? ? ? 導(dǎo)航中不要最后一條線(xiàn)啦
? ? ? ? ? ? nav > a:not(:last-of-type) { border-right: 1px solid red; }
? ?12、偽元素 （偽造出來(lái)的，在html中找不到）兩個(gè)冒號(hào)是為區(qū)別選擇器
? ? ? ? ? ::first-line 文本首行
? ? ? ? ? ? div::first-line {
? ? ? ? ? ? ? ? ? ? color: #f00;
? ? ? ? ? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? ? ? ? ? }? ?
? ? ? ? ? ?::first-letter 文本首字母
? ? ? ? ? ? div::first-letter {
? ? ? ? ? ? ? ? ? ? ? ? color: #f00;
? ? ? ? ? ? ? ? ? ? ? ? font-size: 24px;
? ? ? ? ? ? ? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ::before 元素前插入內(nèi)容 行內(nèi)元素
? ? ? ? ? ? div::before {
? ? ? ? ? ? ? ? ? ? ? ? content: "我在內(nèi)容的前面";
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?::after 元素前插入內(nèi)容? 行內(nèi)元素? 多用于清除浮動(dòng)
? ? ? ? ? ? div::after {
? ? ? ? ? ? ? ? ? ? content: "我在內(nèi)容的后面";
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ????????::seletion? 控制被選中的樣式
? ? ? ? ? ? div::selection {
? ? ? ? ? ? ? ? ? ? background: red;
? ? ? ? ? ? ? ? ? ? color: #ff0;
? ? ? ? ? ? ? ? ? ? }
選擇器權(quán)重問(wèn)題
?? ?? ?() 行內(nèi)樣式1000?> ID選擇器 100 > 類(lèi)、屬性選擇器和偽類(lèi)選擇器10? >元素和偽元素 1 > 通配符選擇器。
帶有上下文關(guān)系的選擇器比單純的元素選擇器權(quán)重更高！
后面會(huì)覆蓋前面的有沖突的選擇器！
無(wú)論多少個(gè)元素組成的選擇器 都沒(méi)有一個(gè)class權(quán)重高！
