CSS選擇器常見的有幾種?
- ID選擇器
#content {css樣式} <div id="content"></div>權限高，慎用 - 類選擇器
.content {css樣式} <div class="content"></div>就是class選擇器 - 派生選擇器
table tr {css樣式}選擇某個元素下的子元素,一般用語作用域隔離 - 分組選擇器
div, p { css樣式}注意中間為英文逗號，兩者為平行關系 - 屬性選擇器
input[type="text"] { css樣式}使用場景偏少
選擇器的優先級是怎樣的?
優先級從高到低
- 在屬性后面添加!important（特定情況下用，幾乎很少）
- 在屬性添加style樣式（一般不推薦這樣寫）
- id選擇器（在唯一特定的元素內使用）
- 類選擇器（使用范圍很廣，經常使用）
- 偽類選擇器（根據需求使用，注意優先級）
- 屬性選擇器（使用場景較少）
- 標簽選擇器（一般少量代碼下使用）
- 通配符選擇器（使用范圍極少，不推薦用，會加大瀏覽器渲染負擔）
- 瀏覽器自定義（權限較低）
class 和 id 的使用場景?
- class選擇器是我們經常使用的選擇器最廣最多的選擇器，可以給任何元素添加class名稱。
- ID選擇器使用前確定此元素權限較高且在文檔里具有唯一性才可使用
使用CSS選擇器時為什么要劃定適當的命名空間？
是為了更好的匹配我們特定需要匹配的元素，只對匹配的元素生效，保證代碼樣式在合理的控制內不出現不必要的錯誤。
以下選擇器分別是什么意思?
#header{
} /* ID選擇器匹配ID為header的元素*/
.header{
} /*類選擇器匹配所有class名為header的元素*/
.header .logo{
} /*匹配所有class名為header的后代里所有class名為logo的元素*/
.header.mobile{
} /*匹配同時具有class名為header和class名為mobile的元素*/
.header p, .header h3{
} /*同時匹配class名為header后代里所有p元素和class名為header后代里所有h3元素*/
#header .nav>li{
} /*匹配ID名為header后代里所有class名為nav的所有直接子元素li*/注意是直接！
#header a:hover{
} /*匹配ID名為header后代里所有a標簽的鼠標懸浮動作*/
列出你知道的偽類選擇器
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */
注意，以上方法需要嚴格按照此順序才能有效！
E:focus匹配獲得焦點的e元素
E:nth-child(n)匹配其父元素的第n個子元素，第一個元素為1
E:nth-last-child(n)匹配其父元素的倒數第n個子元素，第一個元素為1
E:nth-of-type(n)相當于E:nth-child(n)，不過是從同類標簽開始數
:first-child和:first-of-type的作用和區別
:first-child選擇器用于匹配其父元素的首個子元素里的選定標簽
如：p:first-child {樣式}為p的父元素下的第一個P元素標簽first-of-type選擇器匹配屬于其父元素下同種類型的第一個子元素
區別：:first-child屬于強制性的，結構上的父元素下的第一個子元素，如果標簽不準確會匹配不到的情況，而:first-of-type是在父元素下所有的子元素中檢索到所要匹配類型的標簽給他樣式
參考博客:http://www.cnblogs.com/2050/p/3569509.html
運行如下代碼，解析下輸出樣式的原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
.item1:first-of-type{
background: red;
}
/*匹配所有class名為item1的元素（111、222、333、444、555、666）,
尋找其父元素下的第一個同類型的子元素使其背景為紅，
111為父元素body下第一個div元素所以為背景為紅，
222為父元素.ct下第一個p類型子元素所以背景為紅，
333為父元素.ct下第一個div類型子元素所以背景為紅，
444為第2個div子元素所以不變，
555為父元素.item2下第一個div類型子元素所以背景為紅，
666為第2個所以不變*/
.item1:first-child{
color: blue;
}
/* 匹配所有class名為item1的元素（111、222、333、444、555、666），
尋找其父元素下第一個子元素使其顏色為藍，
111為父元素body下第一個子元素所以變藍，
222為父元素.ct下第一個子元素所以變藍，
333和444分別為父元素.ct下第2個第3個子元素所以不變，
555為父元素.item2下第一個子元素所以變藍，
666為第2個所以不變。
*/
</style>
</head>
<body>
<div class="item1">111</div>
<div class="ct">
<p class="item1">222</p>
<div class="item1">333</div>
<div class="item1">444</div>
<div class="item2">
<div class="item1">555</div>
<div class="item1">666</div>
</div>
</div>
</body>
</html>
text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align: center的作用是讓元素內容水平居中，主要作用于塊級元素、表單格元素里的行內元素組成的內容（對塊級元素本身不起作用）.
能夠讓塊級元素內所有的由行內元素（a、span、img、input....）組成的內容水平居中。
如果遇到一個屬性想知道兼容性，在哪查看?
在這個鏈接http://caniuse.com/ 框內查詢其兼容性。
- 本博客版權歸羞澀的澀和饑人谷所有，轉載請注明出處
