css選擇器

一，CSS選擇器常見(jiàn)的有幾種?

答：

  1. 基礎(chǔ)選擇器
  • 組合選擇器
  • 屬性選擇器
  • 偽類(lèi)選擇器
  • 偽元素選擇器

基礎(chǔ)選擇器

* { margin:0; padding:0;}
<!--常用于重置樣式-->
p { font-size:2em;}
<!--元素選擇器-->
.info { background:#ff0;}
<!--class類(lèi)選擇器-->
p.info { background:#ff0;}
<!--class類(lèi)選擇器-->
p.info.error { color:#900; font-weight:bold;}
<!--class選擇器-->
p#info { background:#ff0;}
<!--ID選擇器-->

組合選擇器

div,p { color:#f00;}
<!--并列選擇器-->
#nav,li { display:inline;}
<!--后代選擇器-->
div>strong { color:#f00;}
<!--后代選擇器-->
p+p { color:#f00;}
<!--兄弟選擇器-->
p~ul { color:#f00;}
<!--兄弟選擇器-->

1、并列選擇器（E,F,G,...）
　　這類(lèi)選擇器之間用逗號(hào)作分割，能匹配選擇器列出的所有標(biāo)簽元素。
2、后代選擇器（E F; E>F）
　　E F,標(biāo)簽之間用空格隔開(kāi)，表示匹配E標(biāo)簽內(nèi)所有F標(biāo)簽，所匹配的F標(biāo)簽不僅僅是E標(biāo)簽的兒子，還有可能是E標(biāo)簽的孫子，或者曾孫、從孫等等。
　　E>F標(biāo)簽匹配所有為E標(biāo)簽兒子的F標(biāo)簽。
3、兄弟選擇器（E+F；E~F）
　　E~F選擇其中F標(biāo)簽無(wú)需緊緊跟隨E標(biāo)簽后面第一個(gè)，如果需要實(shí)現(xiàn)這樣的一個(gè)功能可以用E+F選擇器。對(duì)于IE瀏覽器來(lái)說(shuō)只有IE6以上的版本才支持該選擇器。

其他詳細(xì)信息見(jiàn)精華資料

二，選擇器的優(yōu)先級(jí)是怎樣的?

答：
層疊優(yōu)先級(jí)是:
瀏覽器缺省 < 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式
其中樣式表又有:
類(lèi)選擇器 < 類(lèi)派生選擇器 < ID選擇器 < ID派生選擇器
所以完整的層疊優(yōu)先級(jí)是:
瀏覽器缺省 < 外部樣式表 < 外部樣式表類(lèi)選擇器 < 外部樣式表類(lèi)派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內(nèi)部樣式表 < 內(nèi)部樣式表類(lèi)選擇器 < 內(nèi)部樣式表類(lèi)派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式<!important...共13個(gè)優(yōu)先級(jí)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div { color: #00FF00 } /* 綠色 /
.a1 { color: #0000FF } / 藍(lán)色 /
.a1 div { color: #00FFFF } / 青色 /
.a2 { color: #FF0000 } / 紅色 /
#a2 { color: #FFFF00 } / 黃色 /
#a2 div { color: #FF00FF } / 紫色 */
</style>
</head>
<body>
<div>我是綠色，內(nèi)部樣式表優(yōu)先于瀏覽器缺省</div>
<div class="a2">我是紅色，類(lèi)選擇器優(yōu)先于內(nèi)部樣式表</div>
<div class="a2" id="a2">我是黃色，ID選擇器優(yōu)先于類(lèi)選擇器</div>
<div class="a1">
<span>我是藍(lán)色，類(lèi)選擇器優(yōu)先于內(nèi)部樣式表</span>
<div>我是青色，類(lèi)派生選擇器優(yōu)先于類(lèi)選擇器</div>
<div class="a2">我還是青色，類(lèi)派生選擇器優(yōu)先于所有類(lèi)選擇器</div>
<div id="a2">
<span>我是黃色，ID選擇器優(yōu)先于類(lèi)派生選擇器</span>
<div>我是紫色，ID派生選擇器優(yōu)先于類(lèi)派生選擇器</div>
<div class="a1">我還是紫色，ID派生選擇器優(yōu)先于所有類(lèi)選擇器</div>
<div class="a1" id="a1">我還是紫色，ID派生選擇器優(yōu)先于所有ID選擇器</div>
<div class="a1" id="a1" style="color:#000000;">我是黑色，內(nèi)聯(lián)樣式駕到閑雜人等退下</div>
</div>
</div>
</body>
</html> ````
一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先（就近原則），加上!important者最優(yōu)先！

選擇器權(quán)重計(jì)算：

針對(duì)一個(gè)css選擇器表達(dá)式，遇到一個(gè)id就往權(quán)重值中加100，遇到一個(gè)class就往權(quán)重值中加10，遇到一個(gè)標(biāo)簽就往權(quán)重值中加1。
div p#large ul.list 的權(quán)重值113。
div p#large ul.list li的權(quán)重值114。
從上面我們可以得出兩個(gè)關(guān)鍵的因素：
權(quán)值的大小跟選擇器的類(lèi)型和數(shù)量有關(guān)，
樣式的優(yōu)先級(jí)跟樣式的定義順序有關(guān)。
規(guī)則：
選擇器的權(quán)值加到一起，大的優(yōu)先；如果權(quán)值相同，后定義的優(yōu)先

參考資料1，參考資料2

三，class 和 id 的使用場(chǎng)景?

答：唯一 確定只用一次，就用id。重復(fù)多次使用就用class。盡量使用class。

四，使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g？

答：

  1. 保持可維護(hù)性
  • 多人合作時(shí)避免和他人命名產(chǎn)生沖突
  • 可以使代碼具有可讀性，更有語(yǔ)義化并且便于寫(xiě)代碼和調(diào)試代碼
  • 避免因?yàn)槊灰?guī)范而導(dǎo)致出錯(cuò)
五，以下選擇器分別是什么意思?

看注釋

#header{}
<!--匹配ID="header"的元素-->
.header{}
<!--匹配class="header"的元素-->
.header .logo{}
<!--匹配claas="header"下，class="logo"的元素，-->
.header.mobile{}
<!--匹配class="header mobile"的元素-->
.header p, .header h3{}
<!--匹配class="header"下的P元素和h3元素。-->
#header .nav>li{}
<!--匹配ID＝"header"元素下，class="nav"元素的直接子元素li。-->
#header a:hover{}
<!--匹配ID="header"元素下，a元素的偽類(lèi)-->````


##### 六，列出你知道的偽類(lèi)選擇器
答：
- `a:link{}`
- `a:visited{}`
- `a:action{}`
- `a:hover{}`
- `E:first-child{}` 匹配父元素的第一個(gè)子元素。
> 例如:
````<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
h3:first-child 
{
  color: red;
} 
</style>
</head>
<body>
<h3>我是body的第一個(gè)子元素，所以紅色匹配到我，</h3>
<p>我是body的第二個(gè)子元素，所以紅色匹配不到我</p>
</body>
</html>````


![效果](http://upload-images.jianshu.io/upload_images/2784414-87e72d79883609b2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- `E:last-child{}` 匹配父元素的最后一個(gè)子元素
- `E:first-of-style{}` 匹配父元素下使用同種標(biāo)簽的第一個(gè)元素，等同于`E:nth-of-type(1)`
>示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
h3:first-of-type
{
color: red;
}
p:first-of-type
{
color: blue;
}
</style>
</head>
<body>
<h3>我是第一個(gè)h標(biāo)簽，所以紅色</h3>
<h3>我是第二個(gè)h標(biāo)簽，所以不是我</h3>
<p>我是第一個(gè)p標(biāo)簽，<strong>我肯定是藍(lán)色</strong></p>
<p>我是第二個(gè)p標(biāo)簽，所以不是我</p>
</body>
</html>


![效果](http://upload-images.jianshu.io/upload_images/2784414-f601e4b98344ebdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- `E:last-of-style{}`匹配父元素下使用同種標(biāo)簽的最后一個(gè)元素，等同于`E:nth-last-of-type(1)`

常見(jiàn)的偽元素
- `E::before`在E元素之前插入生成的內(nèi)容
- `E::after`在E元素之后插入生成的內(nèi)容
上面兩個(gè)偽元素必須使用`content`屬性。
> 下面的代碼樣例中， ::before和 ::after
將會(huì)在p元素之前和之后插入新內(nèi)容，它使用[content]屬性也就是在內(nèi)容上進(jìn)行操作。

<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
p:before
{
content: "p::Before";
color: #000;
border: 1px solid red;
border-radius: 2px;
}
p:after
{
content: "p::After";
color: #000;
border: 1px solid red;
border-radius: 2px;
}
</style>
</head>
<body>
<p>看看我前后的before和after</p>
</body>
</html>


![效果](http://upload-images.jianshu.io/upload_images/2784414-3d8b8fef4bc182c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- `E::first-line`匹配E元素內(nèi)容的第一行
- `E::first-letter`匹配E元素內(nèi)容的第一個(gè)字母
>示例

<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
body{
width: 200px;
margin: 0 auto;
}
p:first-line
{
color: red;
}
p:first-letter
{
font-size: 2em;
}
</style>
</head>
<body>
<p>首行紅色，首字2em，首行紅色，首字2em，首行紅色，首字2em，首行紅色，首字2em，首行紅色，首字2em，首行紅色，首字2em，首行紅色，首字2em</p>
</body>
</html>

![效果](http://upload-images.jianshu.io/upload_images/2784414-f133b520f6dc6a01.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##### 七，`:first-child`和`:first-of-type`的作用和區(qū)別
答：
**`:first-child`** 匹配的是某父元素的第一個(gè)子元素，可以說(shuō)是結(jié)構(gòu)上的第一個(gè)子元素。
**`:first-of-type`** 匹配的是某父元素下相同類(lèi)型子元素中的第一個(gè)，比如 `p:first-of-type`，就是指所有類(lèi)型為p的子元素中的第一個(gè)。這里不再限制是第一個(gè)子元素了，只要是該類(lèi)型元素的第一個(gè)就行了。
同樣類(lèi)型的選擇器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以這樣去理解。
具體示例看上一個(gè)問(wèn)題**first-child**和**first-of-type**的代碼。

##### 八，運(yùn)行如下代碼，解析下輸出樣式的原因。
>````
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<div class="ct">
 <p class="item1">aa</p>
 <h3 class="item1">bb</h3>
 <h3 class="item1">ccc</h3> </div>````

答：代碼效果圖如下：

![代碼效果圖](http://upload-images.jianshu.io/upload_images/2784414-b5779d4e0d7b6f75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
解析：
1. aa為紅色，是因?yàn)樗莇iv的第一個(gè)子元素。所以代碼`.item1:first-child{ color: red;}`對(duì)它起作用。
- aa bb的的背景是藍(lán)色，是因?yàn)閜和h3分別是他們相同元素類(lèi)型的第一個(gè)元素。所以代碼`.item1:first-of-type{ background: blue;}`對(duì)他們起作用。

##### 九，text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中？
答：實(shí)現(xiàn)塊級(jí)元素內(nèi)的行內(nèi)元素水平居中，**作用在塊級(jí)元素上**，能讓容器內(nèi)部行內(nèi)元素水平居中（包括 文字、圖片、a鏈接等行內(nèi)元素）

##### 十，如果遇到一個(gè)屬性想知道兼容性，在哪查看?
答：使用[can i use](http://caniuse.com/)查看。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一、CSS選擇器常見(jiàn)的有幾種? 基本選擇器 通配選擇器~選擇文檔中所有的html元素，用一個(gè)*表示 元素選擇器~選...
    dengpan閱讀 977評(píng)論 0贊 3
  • 1.class 和 id 的使用場(chǎng)景? class：類(lèi)選擇器，一個(gè)標(biāo)簽可以有多個(gè)類(lèi)且同一個(gè)類(lèi)可以用到不同的標(biāo)簽上，...
    饑人谷_兔子君閱讀 1,211評(píng)論 0贊 0
  • class 和 id 的使用場(chǎng)景? id:id選擇器,使用#name命名，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用...
    jamesXiao_閱讀 241評(píng)論 0贊 0
  • class和id的使用場(chǎng)景 class指定標(biāo)簽的類(lèi)名，屬性值可出現(xiàn)在多個(gè)標(biāo)簽中。id指定標(biāo)簽的唯一標(biāo)識(shí)，為某一元素...
    饑人谷_saybye閱讀 464評(píng)論 0贊 0
  • 1.CSS選擇器常見(jiàn)的有幾種? id選擇器#div1{ } class選擇器 屬性選擇器
    26d608950683閱讀 548評(píng)論 0贊 0