1.CSS選擇器常見的有幾種?
答：
1.基本選擇器
①Elements-標簽選擇器:直接在標簽上面設置樣式，例如div,h1,p,body等等。使用情況較少，一般用于重置元素。h1{color:red}
②Class-類選擇器：定義類的方式是目前最常用的選擇器，可以為不同的標簽設置同一個類，在css中能夠一并設置樣式。
<div class="class_test">我是類選擇器</div>
.class_test {color:red;border:1px black solid;} ```
③ID-ID選擇器 :ID和class最主要的區(qū)別就是id不能被多次使用，在css中也是一樣無法復用。一般用于控制唯一標簽。
```*{
<div id="id_test">我是ID選擇器</div>
#id_test {color:red;border:1px black solid;} ```
④全局選擇器:選中所有的元素，*也被稱之為通配符。使用的情況不算太多，在對某些屬性做全局設置的時候會被用到。
```*{
*{margin:0px; padding:0px;} ```
######2.組合選擇器
| 選擇器 |使用方式 | 符號 |
| ----------- |:-------:|
| E,F | 多元素選擇器，表示可以同時對E,F元素生效。 |逗號 |
| E F | 后代選擇器，表示對E元素之后的所有F元素生效| 空格 |
| E>F | 直接子元素選擇器，通常用于作用于隔離匹配E的最外層子元素 | 大于號 |
| E+F | 直接相鄰選擇器，選中E的直接鄰居。| 加號 |
| E~F | 通用兄弟元素選擇器，表示對E元素之后同級元素F有效| 波浪號 |
######3.屬性選擇器
答：屬性選擇器一般在特定場景下使用，顧名思義是可以直接對屬性添加樣式。例如在Input中：
input[type='text']
{ outline: none;}```
4.偽類選擇器
答：偽類描述一種特定狀態(tài)，一般比較常用的偽類選擇器是對于a元素的定義。
a:link {color:#FF0000;text-decoration:none}
a:visited {color:#00FF00;text-decoration:none}
a:hover {color:#FF00FF;text-decoration:underline}
a:active {color:#0000FF; text-decoration:underline}
5.偽元素選擇器
答：
- E：first-line-為E元素第一行定義樣式；
- E：first-letter-為E元素的第一個字母定義樣式；
- E：before-在E元素之前插入內(nèi)容；
- E : after-在E元素之后插入內(nèi)容；
2.選擇器的優(yōu)先級是怎樣的?
答：
①在屬性后面！important，會被無條件優(yōu)先。
②在Html中給標簽添加style。
③ID選擇器
④Class選擇器
⑤偽類選擇器
⑥屬性選擇器
⑦標簽選擇器
⑧通配符選擇器
⑨瀏覽器自定義
3.class 和 id 的使用場景?
答：由于id的唯一特性，一般被用于定義一些比較大的區(qū)塊。而class一般用于比較通用的一些標簽為他們命名同一個類。
4.使用CSS選擇器時為什么要劃定適當?shù)拿臻g？
答：
- 語義化代碼便于我們后期修改，也易于被讀懂，簡潔規(guī)范。
- 而且如果命名相同的CSS文件一起加載，會產(chǎn)生沖突。
5.以下選擇器分別是什么意思?
答：
#header{
} /*ID選擇器 設置header樣式*/
.header{
}/*類選擇器 設置header樣式*/
.header .logo{
}/*子元素選擇器 對header下的logo設置樣式*/
.header.mobile{
}/*同時匹配header和mobile*/
.header p, .header h3{
}/*對header中的P和H3標簽設置樣式*/
#header .nav>li{
}/*對ID選擇器header下的nav類選擇器直接子元素li設置樣式*/
#header a:hover{
}/*對ID選擇器header中標簽a的hover偽類*/
6.列出你知道的偽類選擇器
E:hover-鼠標懸停效果；
E:active-鼠標點擊效果
E:focus用于元素成為焦點，這個經(jīng)常用在表單元素上。
E:fist-child選擇某個元素的第一個子元素；
E:last-child選擇某個元素的最后一個子元素；
E:nth-child()選擇某個元素的一個或多個特定的子元素；
E:nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；
E:nth-of-type()選擇指定的元素；
E:nth-last-of-type()選擇指定的元素，從元素的最后一個開始計算；
E:first-of-type選擇一個上級元素下的第一個同類子元素；
E:last-of-type選擇一個上級元素的最后一個同類子元素；
E:only-child選擇的元素是它的父元素的唯一一個了元素；
E:only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
E:empty選擇的元素里面沒有任何內(nèi)容。
7.:first-child和:first-of-type的作用和區(qū)別?
答：因為有“type”存在，所以可以理解為前者是某個元素的第一個子元素，而后者是同一個類型元素的第一個子元素。
8.運行如下代碼，解析下輸出樣式的原因。
9.text-align:center的作用是什么，作用在什么元素上？能讓什么元素水平居中？
答：控制內(nèi)聯(lián)元素在塊級元素中位置居中。一般設置文本比較常見，或Img標簽。用margin:0 auto 設置塊元素（或與之類似的元素）的居中。
10.如果遇到一個屬性想知道兼容性，在哪查看?
答：在 can i use這個網(wǎng)站上可以查看元素 屬性在不同瀏覽器不同版本的兼容程度。
****本教程版權歸饑人谷_鬼腳七和饑人谷所有，轉(zhuǎn)載須說明來源****
