CSS選擇器常見的有幾種?
- 基本選擇器
- id選擇器
- 標(biāo)簽選擇器
- 類選擇器
- 通用選擇器
-
屬性選擇器凡泣，常見屬性選擇器E [att]延窜， eg. p [margin=0]
常見屬性選擇器用法 -
組合選擇器
- E,F 群組選擇器禾唁，將具有相同樣式的元素分組在一起
- E > F 子代選擇器
- E F 后代選擇器（E里所包含的所有F的元素）
-
E+F 相鄰兄弟選擇器
相鄰選擇器
偽類選擇器（詳見6題）
偽元素選擇器
::first-line選擇元素的第一行
::first-letter選擇文本塊的第一個(gè)字母
::before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容，這兩個(gè)常用"content"配合使用莉恼，見過最多的就是清除浮動(dòng)咕村。
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden; }
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
選擇器的優(yōu)先級(jí)是怎樣的?
簡(jiǎn)單說，就是選擇器越精確優(yōu)先級(jí)越高来吩。
important > 內(nèi)聯(lián) > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對(duì)象 > ~~繼承 > 通配符> 瀏覽器默認(rèn)
class 和 id 的使用場(chǎng)景?
id用于布局結(jié)構(gòu)敢辩，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，只能有一個(gè)弟疆。
class是一類元素的形式戚长。
** id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式怠苔；class是先定義好一種樣式同廉，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。 **
** 單一的元素，或需要程序恤溶、JS控制的東西乓诽，需要用id定義；重復(fù)使用的元素咒程、類別鸠天，用class定義。 **
使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g帐姻？
語義化稠集，增強(qiáng)代碼可讀性，方便后期維護(hù)饥瓷。
以下選擇器分別是什么意思?
/* id選擇器header */
#header{
}
/* 類選擇器header */
.header{
}
/* 類選擇器header包含的logo選擇器 */
.header .logo{
}
/* 同時(shí)包含header 這個(gè)類和 mobile 這個(gè)類的元素 */
.header.mobile{
}
/* 類選擇器header內(nèi)包含的所有p標(biāo)簽的元素和所有h3標(biāo)簽的元素 */
.header p, .header h3{
}
/* id選擇器header里包含的所有類選擇器nav的兒子li選擇器 */
#header .nav>li{
}
/* id選擇器header標(biāo)簽內(nèi)當(dāng)a標(biāo)簽被懸停時(shí)的樣式 */
#header a:hover{
}
列出你知道的偽類選擇器
** 偽元素選擇器vs偽類選擇器 **
偽元素選擇器：偽元素的效果是需要通過添加一個(gè)實(shí)際的元素才能達(dá)到的剥纷。
偽類對(duì)元素進(jìn)行分類是基于特征而不是它們的名字、屬性或者內(nèi)容呢铆。
由于狀態(tài)是動(dòng)態(tài)變化的晦鞋，所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類的樣式棺克；當(dāng)狀態(tài)改變時(shí)悠垛，它又會(huì)失去這個(gè)樣式。由此可以看出娜谊，它的功能和class有些類似确买，但它是基于文檔之外的抽象，所以叫偽類纱皆。
偽類元素選擇器
動(dòng)態(tài)偽類湾趾，常見：:link，:hover派草，visited搀缠，:hover，:active近迁，:focus
注意：a標(biāo)簽** Link--visited--hover--active **順序Ｒ掌铡（否則會(huì)有覆蓋樣式）
UI元素狀態(tài)偽類
":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類，這些主要是針對(duì)于HTML中的Form元素操作钳踊。
eg. "type="text"有enable和disabled兩種狀態(tài)衷敌，前者為可寫狀態(tài)后者為不可狀態(tài)；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài)拓瞪。
:nth選擇器
:first-child選擇某個(gè)元素的第一個(gè)子元素缴罗；
:last-child選擇某個(gè)元素的最后一個(gè)子元素；
:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素祭埂；
:nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素面氓，從這個(gè)元素的最后一個(gè)子元素開始算兵钮；
:nth-of-type()選擇指定的元素；
:nth-last-of-type()選擇指定的元素舌界，從元素的最后一個(gè)開始計(jì)算掘譬；
:first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素；
:last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素呻拌；
運(yùn)行如下代碼葱轩，解析下輸出樣式的原因。
text-align: center的作用是什么藐握，作用在什么元素上靴拱？能讓什么元素水平居中?
text-align : center 必須加在塊級(jí)元素（父元素）上。行內(nèi)元素加text-align : center ,margin想設(shè)置居中是無效的猾普。
塊級(jí)元素設(shè)置居中袜炕，在他自身設(shè)置margin和padding即可。
text-align : center 是可繼承的初家。
塊級(jí)元素一定要設(shè)置寬度偎窘，才能通過設(shè)置margin：0 auto；來設(shè)置居中溜在。
