一、元素選擇器

????1、書寫格式：標(biāo)記名{/*生命塊*/}

????2、所有與該標(biāo)記匹配的元素，都將應(yīng)用聲明塊中的規(guī)則

二、類選擇器

????1、書寫格式：.類名{/*聲明塊*/}

????????類名為 class的值

????2、所有class屬性為指定類名的元素，都將應(yīng)用聲明塊中的規(guī)則

????????eg:

<p class="color_blue size"> .color_blue{

color: skyblue;

}

.size{

font-size: 50px;

}

一個(gè)class標(biāo)簽可以寫多個(gè)類名，放在class的值中，分隔符為空格

三、ID選擇器

????1、書寫格式：#id值{/*聲明塊*/}

????2、id選擇器只會(huì)選擇一個(gè)元素,屬性id為指定值的元素，將應(yīng)用聲明塊中的規(guī)則

????3、同一個(gè)html文檔中，不同的id值不可重復(fù)。 即 元素中的id值必須唯一

四、通配符選擇器

????1、書寫格式：*{ }

????2、指頁(yè)面內(nèi)所有標(biāo)簽都適用的樣式

????3、范圍太廣，不適用

五、屬性選擇器

????1、書寫格式：input[type="text"]{ }

????【擴(kuò)展】

????????1、選種以xxx開(kāi)頭的元素

????????????書寫格式 元素名[屬性名^="屬性名開(kāi)頭"]

????????????input[type^="t"]{}

????????2、選種以xxx結(jié)尾的元素

????????????書寫格式 元素名[屬性名$=屬性值結(jié)尾的內(nèi)容]

????????????input[type$="d"]

????????3、選中包含XXX的元素

????????????書寫格式 元素名[屬性名*=屬性值包含的內(nèi)容]

????????????input[type*="i"]

六、并集選擇器/組合選擇器

????1、書寫格式：元素A "，" 元素B "，" 元素C

????2、適用于多個(gè)不同標(biāo)簽，應(yīng)用相同的樣式

????3、聲明沖突需要計(jì)算層疊機(jī)制時(shí)，需將每一項(xiàng)分開(kāi)單獨(dú)計(jì)算

七、偽類選擇器

????1、在html中不需要添加class屬性，直接在CSS中書寫

????【分類】

????????1、動(dòng)態(tài)偽類選擇器

????????將鏈接標(biāo)簽<a>設(shè)置樣式，書寫格式：標(biāo)簽：link{ }

（1）link和visited必須放在最前面（無(wú)先后順序）

（2）link和visited只能用于<a>標(biāo)簽，屬于靜態(tài)偽類選擇器

（3）link和visited后面是focus

????????????????鎖定，將自身的樣式變化賦予指定的標(biāo)簽

????????????????例：input：focus span{corlor：deeppink}，鼠標(biāo)選種input，則span標(biāo)簽的內(nèi)容變成deeppink

（4）focus后面是hover

（5）hover后面是active

????????????通常情況下，我們會(huì)用到1245

????????????????{記憶方法：網(wǎng)絡(luò)通用——愛(ài)恨原則：love hate}

???????????????????? l v h a

????????2、結(jié)構(gòu)偽類選擇器

????????????書寫格式：元素：nth-child（n）{}

????????????????eg：section>p:first-child{}

????????????????解釋：選種section下的第一個(gè)子元素，如果為p元素，則進(jìn)行樣式變化；若不是，則不變

????????????（1）要將奇數(shù)和偶數(shù)項(xiàng)分開(kāi)添加樣式

????????????????????元素：nth-child（2n）

????????????????????????選偶數(shù)項(xiàng)元素

????????????????????????????even

????????????????????元素：nth-child（2n 1）

????????????????????????選種奇數(shù)項(xiàng)元素

????????????????????????????odd

???????? （2）只選中前m個(gè)同樣的元素

????????????????????元素：nth-child（-n m）

????????????????????中間不能插入其他元素

???????????? （3）選種A標(biāo)簽下的B元素中的第n個(gè)

????????????????????A>B:nth-of-type(n){}

???????????? （4）選種A標(biāo)簽下的B元素中的倒數(shù)第n個(gè)

????????????????????A>B:nth-last-of-type(n){}

????????3、否定偽類選擇器

????????????選種除了第n個(gè)元素的其他同類元素

????????????????元素：not（：nth-child(3)){}

七、偽元素選擇器

????CSS創(chuàng)建的元素，都是選種元素的子元素

????分類

????????元素：：before{}

????????????選種元素的第一個(gè)子元素

????????元素：：after{}

????????????選種元素的最后一個(gè)子元素

????????元素：：first-line{}

????????????選種元素的第一行

????????元素：：first-letter{}

????????????選種元素的第一個(gè)字

????????????

????????????