一、標(biāo)簽選擇器：根據(jù)指定的規(guī)則，找到所有此指定的標(biāo)簽設(shè)置屬性
格式： 標(biāo)簽名稱 { 屬性:值; 屬性:值; }
p { 屬性:值; }
/* CSS標(biāo)簽選擇器 */
h2 { text-align: center; color: red; }
p { color: blue; text-align: center;}

注意：標(biāo)簽選擇器不能單獨(dú)設(shè)置一個(gè)標(biāo)簽，而只能設(shè)置一類標(biāo)簽

二、id選擇器：根據(jù)指定的id名稱，找到對(duì)應(yīng)id的標(biāo)簽，設(shè)置其屬性
格式：

id名稱 { 屬性:值; }

/* CSS id選擇器 */
#idwo {color: orange;}
#idyue {color: yellow;}
#idyou {color: green;}
#idzai {color: blue;}
注意：
任何一個(gè)HTML標(biāo)簽都有一個(gè)id屬性，都可以設(shè)置id(類似身份證)
在同一界面中，不要重復(fù)id名稱，會(huì)發(fā)生未知錯(cuò)誤
id名稱規(guī)范：只能由字母、數(shù)字、下劃線，且不能以數(shù)字開頭
id名稱不能是HTML標(biāo)簽名稱
在開發(fā)中，id屬性不用于CSS樣式，id基本用于js

三、類選擇器：類似id選擇器，根據(jù)指定的類名稱，找到對(duì)應(yīng)標(biāo)簽，設(shè)置屬性
/* 類選擇器 */
.classLian {text-decoration: overline;}
.classPao {text-decoration: line-through;}
.classYi {text-decoration: underline;}
.classZhen {text-decoration: initial;}

注意：
任何一個(gè)HTML標(biāo)簽都有一個(gè)class屬性，都可以設(shè)置class
在同一界面中，class屬性可以重復(fù)
class名稱規(guī)范：只能由字母、數(shù)字、下劃線，且不能以數(shù)字開頭
class名稱不能是HTML標(biāo)簽名稱
類名專門用來(lái)給一個(gè)標(biāo)簽設(shè)定CSS樣式的

HTML標(biāo)簽中，一個(gè)標(biāo)簽可以綁定多個(gè)類名(類似人的小名)
<p class="類名1 類名2 類名3">XXX</p>

Paste_Image.png

id選擇器和class選擇器的對(duì)比：
① id選擇器不能重復(fù)，class選擇器可以重復(fù)
② 一個(gè)HTML標(biāo)簽只能綁定一個(gè)id選擇器，一個(gè)HTML標(biāo)簽可以綁定多個(gè)class選擇器
③ id選擇器以#開頭，class選擇器以 . 開頭
④ 企業(yè)開發(fā)中，id僅用于js，不用于CSS樣式

Paste_Image.png

四、后代選擇器：找到指定標(biāo)簽的所有特定的后代標(biāo)簽，設(shè)置屬性。類似人的下代，繼承的關(guān)系。
格式：
標(biāo)簽名稱1 標(biāo)簽名稱2 { 屬性:值; }

先找到標(biāo)簽名稱1的標(biāo)簽，然后在這個(gè)標(biāo)簽下面去查找所有叫 標(biāo)簽名稱2 的標(biāo)簽，然后設(shè)置屬性

Paste_Image.png

Paste_Image.png

五、子元素選擇器：找到指定標(biāo)簽中的有的特定的直接子元素，設(shè)置屬性(下一代，不是下幾代，兒子)
格式：
標(biāo)簽1>標(biāo)簽2 { 屬性:值; }
標(biāo)簽1>標(biāo)簽2>標(biāo)簽3>標(biāo)簽4 { 屬性:值; }

Paste_Image.png

六、交集選擇器：給所有選擇器選中的標(biāo)簽中，相交的那部分設(shè)置屬性
格式：
選擇器1選擇器2 {屬性:值; 屬性:值; }
p.class#id {pro:val;}

注意：
選擇器：標(biāo)簽、#id 、 .class
選擇器1和選擇器2必須挨著，但是是 #id 和 .class

Paste_Image.png

七、并集選擇器：給所有選擇器選中的標(biāo)簽設(shè)置屬性
格式：
選擇器1,選擇器2 {屬性:值; 屬性:值;}

Paste_Image.png

八、兄弟選擇器：同級(jí)關(guān)系
相鄰兄弟選擇器CSS2
-給指定選擇器后面緊跟的那一個(gè)選擇器的標(biāo)簽設(shè)置屬性
格式：
選擇器1+選擇器2 {屬性:值;}

Paste_Image.png

通用兄弟選擇器CSS3
-給指定的選擇器后面所有的選擇器中的選中標(biāo)簽設(shè)置屬性
格式：
選擇器1~選擇器2 {屬性:值;}

Paste_Image.png

九、序選擇器10個(gè)：CSS3中新增的最具有代表性質(zhì)的選擇器
-設(shè)置同級(jí)標(biāo)簽的第幾個(gè)的屬性
p:first-child 選中同級(jí)的第一個(gè)標(biāo)簽設(shè)置屬性，不區(qū)分類型

-設(shè)置同級(jí)中同類型的第幾個(gè)標(biāo)簽的屬性
p:first-of-type 選中同級(jí)且同類型中的第一個(gè)標(biāo)簽設(shè)置屬性，不區(qū)分類型
p:last-of-type 選中同級(jí)且同類型中的最后一個(gè)標(biāo)簽設(shè)置屬性，不區(qū)分類型
p:nth-child(n) 選中同級(jí)且同類型中的第n個(gè)標(biāo)簽設(shè)置屬性，不區(qū)分類型
...........

Paste_Image.png

序選擇器 下：
even：選中頁(yè)面中為偶數(shù)行的標(biāo)簽設(shè)置屬性
odd : 選中頁(yè)面中為奇數(shù)行的標(biāo)簽設(shè)置屬性

--同級(jí)別
p:nth-child(odd) {pro:val; pro:val;}
p:nth-child(even) {pro:val; pro:val;}

--同類型
p:nth-of-type(odd) {pro:val; pro:val;}
p:nth-of-type(even) {pro:val; pro:val;}

序選擇器很重要，常見的應(yīng)用場(chǎng)景：

Paste_Image.png

十、屬性選擇器(7個(gè))：根據(jù)指定的屬性名稱，找到對(duì)應(yīng)的標(biāo)簽然后設(shè)置屬性
第1個(gè) [attribute]
p[class] {color: lightgreen;} /* 屬性選擇器【attribute】 */

Paste_Image.png

第2個(gè)：[attribute=value] 最常見應(yīng)用于 input 屬性
類似這樣 input[type=password] {pro:val;}
p[class="類名"] {pro:val; pro:val;}

其余5個(gè)屬性選擇器分為3類

• 以某指定值開頭的屬性取值
  [attribute|=value] CSS2
  [attribute^=value] CSS3
  格式：
  img[alt^=abc] {pro:val;}

• 以某個(gè)指定值結(jié)尾的屬性取值
  [attribute$=value] CSS3
  格式：
  img[alt$=xxx] {pro:val;}

• 包含了某個(gè)指定值的屬性取值
  [attribute~=value] CSS2
  [attribute=value] CSS3
  格式：
  img[alt=def] {pro:val;}

<img src="" alt="abc_xxx" />
<img src="" alt="def_xxx" />
<img src="" alt="abc_def" />
<img src="" alt="xxx_def" />
<img src="" alt="xxx_abc" />
<img src="" alt="def_abc" />

Paste_Image.png

十一、通配符選擇器：給當(dāng)前界面所有標(biāo)簽設(shè)置屬性，設(shè)置前會(huì)遍歷界面所有標(biāo)簽，性能會(huì)比較差
格式：

• {pro:val;}