首先先捋一捋都有哪些選擇器
1、通配符選擇器
? 舉例? ?
????? *{width:100px;}
2、元素選擇器
????（在 W3C 標準中，元素選擇器又稱為類型選擇器票摇，看清楚啦是類型選擇選器，區(qū)別于類選擇器）
? 舉例
????h1 { color:black; }
3砚蓬、類選擇器
? ???舉例
????<h1 class="important">我是標題</h1>
????<p class="important">我是段落</p>
????<p class="important">我是段落</p>
????<p class="important?urgent ">我是段落</p>
????.important{ color:red; }? ?
????*.important {color:red;}?表示匹配 class 屬性包含 important 的所有元素（通配符+類選擇器）
????p.important {color:red;} 表示匹配 class 屬性包含 important 的所有 p 元素（元素+類選擇器）
????.important .urgent{color:red;} （多類選擇器）
4矢门、ID選擇器
舉例
<p id="intro">This is a paragraph of introduction.</p>
#intro {font-weight:bold;}
5、后代選擇器
????后代選擇器有一個易被忽視的方面灰蛙，即兩個元素之間的層次間隔可以是無限的祟剔。
? ? 舉例
????h1 em { color:red;}
6、子元素選擇器
? ??舉例
? ??h1>strong {color:red;}
7摩梧、相鄰兄弟元素選擇器
? ??舉例
????h1 + p {margin-top:50px;}
? ??選擇緊接在 h1 元素后出現(xiàn)的段落物延，h1 和 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] 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞粪糙。
????[attribute^=value] 匹配屬性值以指定值開頭的每個元素强霎。
????[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
????[attribute*=value] 匹配屬性值中包含指定值的每個元素蓉冈。
? ??p[class~="important"]{ color: red;}
????可以應用樣式：
????無法應用樣式：
11、偽類選擇器
? ? ?A轩触、動態(tài)偽類 （這些偽類并不存在HTML中寞酿，只有當用戶和網(wǎng)站交互的時候才能體現(xiàn)）
? ? ? ? ? ?錨點偽類（:link[ 未訪問鏈接 ]? :visited[ 已訪問鏈接 ]）
? ? ? ? ? ?用戶行為偽類(:hover [ 當鼠標懸停 ] :active[ 正在進行的被選擇的鏈接 ] :focus[ 規(guī)定獲得焦點的輸入字段的顏色 輸入框內(nèi)的顏色] )
? ? ?B、UI元素狀態(tài)偽類(css3新增)
? ? ? ?????:enabled（表單可選中）?
? ? ? ? ????????input：enabled{}? ?
????????????:disabled（表單不可選中disabled=“disabled”）??
? ? ?? ? ? ? ????input：disabled{}
????????????:checked
? ? ? C脱柱、CSS結構類
?????????type類的就是數(shù)數(shù)的時候不管什么元素都一起算個數(shù)
? ? ? ? :first-child【父元素的首個以及最后一個子元素】
? ? ? ? ? ? ????section > div:first-child {color: #f00;}
? ? ? ? ? ????? 配合前面的元素去寫 否則很容易亂
? ? ? ? ? ? ? ? :last-child伐弹、
? ? ? ? ? ? ? ? 某元素的最后一個元素
? ? ? ? :nth-child ( n )
? ? ? ? ? ? 無論元素類型 ，匹配屬于其父元素的第n個元素
? ? ? ? （2n）even偶數(shù) （2n+1）odd奇數(shù)
? ? ? ? :nth-last-child( )
? ? ? ? ? ? 無論元素類型 榨为，從最后一個子元素開始計數(shù)惨好，且從1開始計數(shù)
? ? ? ? ?:nth-of-type( )
? ? ? ? ? ? 匹配屬于父元素的特定類型的第n個子元素的每個元素
????????????????【如果指定div? 那就只數(shù)div? 不管還有什么元素】
? ? ? ? ? :nth-last-of-type( )
? ? ? ? ? ? ? ? 如果指定div? 那就只數(shù)div? 不管還有什么元素 倒數(shù)的哦
? ? ? ? ? :first-of-type煌茴、:last-of-type（正數(shù)）
? ? ? ? ? :only-child、
? ? ? ? ? ? 匹配屬于其父元素唯一子元素的每個元素 同一個父元素中有其他兄弟元素也不行
? ? ? ? ? ?:only-of-type日川、
? ? ? ? ? ? 有兄弟元素也沒關系啦? 只要父元素里指定的元素只有一個就好啦
? ? ? ? ????????:empty
? ? ? ? ? ? ? ? ????div:empty {background: #f00; }
? ? ? ? ? ? ? ? 把空的找出來 就可以給樣式啦
????????否定選擇器蔓腐，被選中的 執(zhí)行
? ? ? ? ? ? ? ? 舉例
? ? ? ? ? ? ? ? 導航中不要最后一條線啦
? ? ? ? ? ? nav > a:not(:last-of-type) { border-right: 1px solid red; }
? ?12、偽元素 （偽造出來的龄句，在html中找不到）兩個冒號是為區(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)元素? 多用于清除浮動
? ? ? ? ? ? div::after {
? ? ? ? ? ? ? ? ? ? content: "我在內(nèi)容的后面";
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ????????::seletion? 控制被選中的樣式
? ? ? ? ? ? div::selection {
? ? ? ? ? ? ? ? ? ? background: red;
? ? ? ? ? ? ? ? ? ? color: #ff0;
? ? ? ? ? ? ? ? ? ? }
選擇器權重問題
?? ?? ?() 行內(nèi)樣式1000?> ID選擇器 100 > 類回论、屬性選擇器和偽類選擇器10? >元素和偽元素 1 > 通配符選擇器。
帶有上下文關系的選擇器比單純的元素選擇器權重更高分歇！
后面會覆蓋前面的有沖突的選擇器傀蓉！
無論多少個元素組成的選擇器 都沒有一個class權重高！
