相信很多學(xué)編程的同學(xué)都知道選擇器這種概念，比如基礎(chǔ)選擇器、偽類選擇器以及屬性選擇器等等，下面由小生斗膽總結(jié)那些年我們用過的選擇器。
基礎(chǔ)選擇器
1、標(biāo)簽選擇器：給所有的同種標(biāo)簽制定標(biāo)準(zhǔn)
語法：標(biāo)簽名 {
key:value;
}
實(shí)例：div {
width:100px;
}
2、類名選擇器:將標(biāo)簽歸為一類來命名
一對多：一個(gè)類名可以多個(gè)標(biāo)簽使用
多對一：一個(gè)標(biāo)簽可以用多個(gè)類名
定義一個(gè)類名（class="類名"）
語法：.類名 {
key:value;
}
實(shí)例：.head {
width:100px;
}
使用類名（多個(gè)類名用空格隔開）
<div class="head"></div>
<div class="類名 類名-1 類名-2"></div>
3、ID選擇器：唯一性 只能給一個(gè)標(biāo)簽用 同種ID名只能用一次
語法：#名字 {
key:value;
}
實(shí)例：#foot {
width:100px;
}
4、包含選擇器：從父元素里面找符合標(biāo)準(zhǔn)的子孫元素
先找到父元素 再找到它的子孫元素 從中篩選出符合條件的元素
用 空格 連接
語法：.類名/標(biāo)簽名 .類名/標(biāo)簽名 {
key:value;
}
實(shí)例：div .son {
width:100px;
}
5、子選擇器：找到的只是子元素
先找到父元素 再找到它的子元素 從中篩選出符合條件的元素
語法：.類名/標(biāo)簽名 >.類名/標(biāo)簽名 {
key:value;
}
實(shí)例：.father>div {
width:100px;
}
6、全局選擇器： 通配符 * （兼容性不太好）
語法：* {
key:value;
}
實(shí)例：* {
width:100px;
}
7、群組選擇器（節(jié)省代碼）
語法：標(biāo)簽名,標(biāo)簽名 {
key:value;
}
實(shí)例：div,div {
width:100px;
}
8、相鄰選擇器 :
找到指定元素的相鄰的兄弟元素（只能找下方的相鄰元素）
語法：.類名/標(biāo)簽名+.類名/標(biāo)簽名 {
key:value;
}
實(shí)例：.a+div {
width:100px;
}
9、兄弟選擇器 （css3）:
找到指定元素的同級的所有兄弟元素（只能找下方的同級所有兄弟元素，并且為同種標(biāo)簽）
語法：.類名/標(biāo)簽名~.類名/標(biāo)簽名 {
key:value;
}
實(shí)例：.a~div {
width:100px;
}
偽類選擇器
1、:hover
指的是給指定元素加上鼠標(biāo)懸停狀態(tài)下的樣式（該元素必須有寬高）
2、:active
指的是給指定元素加上鼠標(biāo)激活狀態(tài)下的樣式
3、:after
指的是給指定元素后面添加一個(gè)偽元素 必須攜帶 content："" 屬性
4、：before
指的是給指定元素前面添加一個(gè)偽元素 必須攜帶 content: "" 屬性
5、 ： focus
設(shè)置焦點(diǎn)（聚焦）狀態(tài)
6、
（1）：first-child
指的是父元素下的第一個(gè)子元素
（2）：last-child
指的是父元素下的最后一個(gè)子元素
（3）：nth-child（n）n為幾 就是第幾個(gè)子元素 從前面開始指定
2n
3n
odd 奇數(shù)
even 偶數(shù)
（4）：nth-last-child（n） 從后面開始指定
（5）：only-child 只有一個(gè)子元素 需加空格
（6）：empty 沒有子元素的 沒有任何文本 不加空格
（7）：not（） 取反（反選）
（8）：root 根元素
（9） E：first-of-type
先找到元素E，再找到其中的第一個(gè)
（10） E：last-of-type
先找到元素E，再找到其中的最后一個(gè)
（11） E：only-of-type
先找到元素E，再找到其中的只有一個(gè)的
（12） E：nth-of-type（n）
先找到元素E，再找到其中的第n個(gè)
（13） E：nth-last-of-type（n）
先找到元素E，再找到其中倒數(shù)的第n個(gè)
（14） ：first-letter/：last-letter （：：first-letter）
第一個(gè)字符/最后一個(gè)字符
（15） ：first-line /：last-line （：：first-line）
第一個(gè)行/最后一個(gè)行
屬性選擇器
1、 元素[屬性] {}
找到某個(gè)元素，并且攜帶這個(gè)屬性
<div class></div>
<div></div>
div[class='box'] {
width: 200px;
height: 200px;
background: green;
}
// 只會給第一個(gè)設(shè)置屬性
2、 元素[屬性='屬性值'] {}
找到某個(gè)元素，且攜帶這個(gè)屬性，并且屬性值相等的(有且只有一個(gè)屬性值)
<div class></div>
<div class="box"></div>
<div class="box box2"></div>
div[class='box'] {
width: 200px;
height: 200px;
background: green;
}
// 只會給第二個(gè)設(shè)置屬性
3、 元素[屬性~='屬性值'] {}
找到某個(gè)元素，且攜帶屬性，并且屬性值中包含指定的屬性值
<div class="box2"></div>
<div class="box box2"></div>
div[class~='box2'] {
width: 300px;
height: 300px;
background: purple;
}
// 只要屬性之中含有 box2就設(shè)置屬性，給所有的div標(biāo)簽設(shè)置屬性
4、 元素[屬性|='前綴'] {}
找到元素，并且攜帶屬性，并且屬性值要以指定的形式: '前綴-xxxx'
<div class="key box1 box2"></div>
<div class="key-box box1 box2"></div>
<div class="key-box2 box1 box2"></div>
div[class|='key'] {
width: 50px;
height: 50px;
background: pink;
}
// 只給后面兩個(gè)設(shè)置屬性
5、 元素[屬性^='前綴'] {}
找到元素，并且攜帶屬性 ,并且屬性值以'前綴'開頭（屬性中只有一個(gè)屬性值）
<div class="ax"></div>
<div class="baox"></div>
div[class^='a'] {
width: 20px;
height: 20px;
background-color: #000;
}
// 只給第一個(gè)設(shè)置屬性
6、元素[屬性$='后綴'] {}
找到元素，并且攜帶屬性 ,并且屬性值以'后綴'結(jié)尾
<div class="baox"></div>
<div class="axb"></div>
div[class$='b'] {
width: 20px;
height: 20px;
background-color: blue;
}
// 只給第二個(gè)設(shè)置屬性
7、 元素[屬性*='中間'] {}
找到元素，并且攜帶屬性 ,并且屬性值中包含'中間'
<div class="ax"></div>
<div class="axb"></div>
div[class*='x'] {
width: 10px;
height: 10px;
background-color: palegreen;
}
// 兩個(gè)都會設(shè)置屬性
還有一點(diǎn)就是當(dāng)我們寫程序時(shí)，可能會遇到代碼寫上了，但是效果卻不是我們想要的，這里就遇到了選擇器權(quán)重的問題：
權(quán)重： 通配符<標(biāo)簽選擇器<類名/偽類選擇器<ID選擇器<行內(nèi)樣式<！important
本人學(xué)識有限，如有錯(cuò)誤，希望界內(nèi)大?？梢灾刚?，萬分感謝！??！
