1.CSS選擇器常見的有幾種?
<ol>
<li>id選擇器
#div1{ }
<li>class選擇器
<li>屬性選擇器
{
} ```
<li>分組選擇器 （節省代碼）
``<style>
h1,p1{
color:red;
}
</style>``
<li>派生選擇器（子元素選擇器）</li>
```<html><style>
mod-box h1 {
color:red;
}
</style>
讓mod-box里的h1變色，外面的h1不變，選擇mod-box中所有的h1``
``<style>
mod-box > h1 {
color:red;
}
</style>
讓mod-box里的h1變色，但是只在這一層級，若是里面再有一層則不選擇</html>```
***
##2.選擇器的優先級是怎樣的？
在屬性后面使用 !important
會覆蓋頁面內任何位置定義的元素樣式
作為style屬性寫在元素標簽上的內聯樣式
1.id選擇器
2.類選擇器
3.偽類選擇器
4.屬性選擇器
5.標簽選擇器
6.通配符選擇器
7.瀏覽器自定義
在一些復雜的情況下，我們會依靠權重計算。id選擇器的權值為1000，class選擇器為100，標簽選擇器為10，如果兩個選擇器權值相同則后面的樣式覆蓋前面的樣式，例如寫了兩個相同的class，給color定義了不同的顏色，會采用后面的class。
***
##3.class 和 id 的使用場景是什么?
id具有唯一性，一個頁面只能使用一次，優先級較高。
class可以普遍使用，把一些特定樣式放到一個class類中，需要此樣式的標簽，可以在添加此類。
***
##4.使用CSS選擇器時為什么要劃定適當的命名空間？
1.提高代碼可讀性；
2.便于維護管理；
3.保持代碼的可拓展性；
4.避免結構沖突。
***
##5. 以下選擇器分別是什么意思?
```<html>
#header{ /*id選擇器，定義header的樣式*/
}
.header{/*class選擇器，定義header下所有class的樣式*/
}
.header .logo{ /*定義header下logo的樣式*/
}
.header.mobile{/*定義同時有header和mobile元素的樣式*/
}
.header p, .header h3{/*定義header下p的樣式和header下h3的樣式*/
}
#header .nav>li{/*定義header下 nav里li同層級的樣式*/
}
#header a:hover{/*定義id header中a鏈接的偽類*/
}```
***
##6.列出部分偽類選擇器
<ul><li>E:first-child 匹配元素E的第一個子元素
<li>E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
<li>E:hover 匹配鼠標懸停其上的E元素
<li>E:hover 匹配鼠標懸停其上的E元素
<li>E:disabled 匹配表單中禁用的元素
<li>E:checked 匹配表單中被選中的radio或checkbox元素
<li>E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
<li>E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
<li>E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)</li></ul>
***
##7.:first-child和:first-of-type的作用和區別
<ul><li>:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個子元素。比如有段代碼：
p:first-child 匹配到的是p元素,因為p元素是div的第一個子元素；
h1:first-child 匹配不到任何元素，因為在這里h1是div的第二個子元素，而不是第一個；
span:first-child 匹配不到任何元素，因為在這里兩個span元素都不是div的第一個子元素；
<li>:first-of-type是css3中的選擇器，相同的一段代碼：
p:first-of-type 匹配到的是p元素,因為p是div的所有類型為p的子元素中的第一個；
h1:first-of-type 匹配到的是h1元素，因為h1是div的所有類型為h1的子元素中的第一個；
span:first-of-type 匹配到的是第三個子元素span。這里div有兩個為span的子元素，匹配到的是它們中的第一個。
所以，可以得出結論：
**:first-child** 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。
**:first-of-type** 匹配的是某父元素下相同類型子元素中的第一個，比如 p:first-of-type，就是指所有類型為p的子元素中的第一個。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了。
同樣類型的選擇器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以這樣去理解。</ul>
***
##8.運行如下代碼，解析下輸出樣式的原因。
第一行的aa顯示為紅色，是因為``<p class="item1">aa</p>``這行代碼是``<div class="ct">``這個類中的第一個元素，所以
`` .item1:first-child {color: red;}``對其起作用。
"aa"和"bb"背景色為藍色，因為它們分別是"p"和"h3"的第一個元素，而"cc"是h3的第二個元素，所以此元素沒有背景色效果。
***
##9.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align: center
作用是使元素水平居中，作用在塊級元素上，讓塊級元素內部的行內元素水平居中。
一般用在標題里 如： ``<h1 style="text-align:center>標題</h1>``
***
##10.如果遇到一個屬性想知道兼容性，在哪查看?
使用<a >Caniuse</a>查詢
***
**本文版權歸本人和饑人谷所有，轉載請注明來源**