一环壤、CSS選擇器常見的有幾種?
常見的有
1、id選擇器
見自己編寫的如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#licai {
background-color: red;
font-size: 60px;
}
</style>
</head>
<body>
<h1 id="licai">這是id選擇器</h1>
<h1>這不是id選擇器</h1>
</body>
</html>
2靶草、class選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.licai {
background-color: red;
font-size: 60px;
}
</style>
</head>
<body>
<h1 class="licai">這是class選擇器</h1>
<h1>這不是class選擇器</h1>
</body>
</html>
3雨膨、屬性選擇器
3.1 屬性名加屬性值型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type="password"]
{
margin: 10px;
width: 200px;
}
</style>
</head>
<body>
<form name="MyfirstForm" action="http://www.baidu.com" method="get" >
用戶名<input name="username" type="text" placeholder="請輸入用戶名"> <br>
密碼<input name="MyPassword" type="password" placeholder="請輸入密碼" >
</form>
</body>
</html>
3.2純屬性名型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img[title]
{
border: 2px solid red;
}
</style>
</head>
<body>
<div id="pic" > 這里是匿名者的圖片
</div>
</body>
</html>
4松蒜、分組選擇器
用“,”隔開扔茅，表示該組元素屬性都會作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fenzu,p
{
border: 2px solid red;
}
</style>
</head>
<body>
<h1 class="fenzu"> 這是h1標(biāo)題</h1>
<h1> 這也是h1標(biāo)題</h1>
<div>
<h1>這是div里的h1</h1>
<p> 這是div里的p </p>
</div>
</body>
</html>
5、派生選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.paisheng h1
{
background-color: #999;
}
</style>
</head>
<body>
<h1> 這是h1標(biāo)題</h1>
<div class="paisheng">
<h1>這是div里的h1</h1>
<h1> 這也是div里的h1標(biāo)題</h1>
<p> 這是div里的p </p>
</div>
</body>
</html>
6秸苗、偽類選擇器
比如.hover召娜、::selection、.action惊楼、:first-child玖瘸、:last-child、:first-of-type檀咙、:last-of-type雅倒、:nth-of-type(n)、:nth-of-last-type(n)等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#weilei
{
width: 200px;
color: #999;
background-color:red;
transition-property:width;
transition-duration:3s;
}
#weilei:hover
{
width: 400px;
}
</style>
</head>
<body>
<div id="weilei">
這是偽類選擇器
</div>
</body>
</html>
又例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1::selection
/*
1弧可、::selection只支持color/background/cursor/outline四種屬性蔑匣；
2、firefox支持替代::-moz-selection;
*/
{
color: red;
background: blue;
}
</style>
</head>
<body>
<h1> 選中后字體變紅色背景變藍色</h1>
<p> 選中后不變色</p>
</body>
</html>
7棕诵、偽元素選擇器
:after裁良、:before等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul,li
{
list-style:none;
}
li:before
{
content: "這是前置字 ";
color: red;
background-color: green;
}
li:after
{
content: " 這是后置字 ";
color: yellow;
background: blue;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>我的前面需要增加“這是前置字”，我的后面需要增加“這是后置字”</li>
<li>我的前面需要增加“這是前置字”校套，我的后面需要增加“這是后置字”</li>
<li>我的前面需要增加“這是前置字”价脾，我的后面需要增加“這是后置字”</li>
<li>我的前面需要增加“這是前置字”，我的后面需要增加“這是后置字”</li>
</ul>
</body>
</html>
8笛匙、組合選擇器
比如E,F/E F（后代選擇器）/E>F（子元素選擇器）/E+F（直接相鄰元素選擇器----匹配之后的相鄰?fù)壴兀?E~F（普通相鄰元素選擇器----匹配之后的同級元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.inside+h1
{
background: red;
}
</style>
</head>
<body>
<div class="outside">
這是外層DIV
<h1>
這是h1大標(biāo)題
</h1>
<div class="inside">
這是外層DIV里的div
<h1>
這是中層div的h1標(biāo)題1
</h1>
<p> 這是中層div里的段落</p>
<h1>
這是中層div的h1標(biāo)題2
</h1>
<div> 這是內(nèi)層div
<h1> 這是內(nèi)層div的h1標(biāo)題</h1>
</div>
</div>
<h1>
這也是h1大標(biāo)題
</h1>
<h1>
這還是h1大標(biāo)題
</h1>
</div>
</body>
</html>
二侨把、選擇器的優(yōu)先級是怎樣的?
- 選擇器優(yōu)先級由高到低分別為：
!important > 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式 >id選擇器>類選擇器>偽類選擇器>屬性選擇器>標(biāo)簽選擇器> 通配符選擇器（* 應(yīng)少用）>瀏覽器自定義犀变；
當(dāng)比較多個相同級別的CSS選擇器優(yōu)先級時，它們定義的位置將決定一切座硕。下面從位置上將CSS優(yōu)先級由高到低分為六級：
1弛作、位于<head/>標(biāo)簽里的<style/>中所定義的CSS擁有最高級的優(yōu)先權(quán)涕蜂。
2华匾、第二級的優(yōu)先屬性由位于 <style/>標(biāo)簽中的 @import 引入樣式表所定義。
3机隙、第三級的優(yōu)先屬性由<link/>標(biāo)簽所引入的樣式表定義蜘拉。
4、第四級的優(yōu)先屬性由<link/>標(biāo)簽所引入的樣式表內(nèi)的 @import 導(dǎo)入樣式表定義有鹿。
5旭旭、第五級優(yōu)先的樣式有用戶設(shè)定。
6葱跋、最低級的優(yōu)先權(quán)由瀏覽器默認持寄。選擇器注明的越具體，某些情況下則其優(yōu)先級也越高娱俺；若重復(fù)寫了則以最后的為準(zhǔn)稍味；
三、class 和 id 的使用場景?
- class使用場景：需要某些特定樣式的標(biāo)簽則放在同一個class中荠卷，需要此樣式的標(biāo)簽可再添加此類模庐。（class不可被javascript中的GetElementByID函數(shù)所調(diào)用）
- id使用場景：1、根據(jù)提供的唯一id號快速獲取標(biāo)簽對象油宜，如：document.getElementById(id) 掂碱；2、用于充當(dāng)label標(biāo)簽for屬性的值：示例：<label for='userid'>用戶名：</label>慎冤，表示單擊此label標(biāo)簽時疼燥，id為userid的標(biāo)簽獲得焦點
四、使用CSS選擇器時為什么要劃定適當(dāng)?shù)拿臻g蚁堤？
劃定適當(dāng)?shù)拿臻g可：
1悴了、提高代碼的可讀性；
2违寿、便于維護管理湃交；
3、保持代碼的可拓展性藤巢；
五搞莺、以下選擇器分別是什么意思?
詳見注釋：
#header{
} /* 這是id選擇器header*/
.header{
}/*這是類選擇器header*/
.header .logo{
}/*這是類選擇器header后的類logo*/
.header.mobile{
}/* 滿足類header及類mobile */
.header p, .header h3{
}/* 類選擇器中的header 段落p 和類選擇器中的標(biāo)題h3 */
#header .nav>li{
}/*id選擇器中的header后的類選擇器nav的直接子元素li */
#header a:hover{
}/*id選擇器header后的a標(biāo)簽hover偽類*/
六、列出你知道的偽類選擇器
:hover /:active/ :link /:visited/::selection/:focus/:first-child/:nth-child(n)/:first-of-type/:nth-of-type(n)/:last-child/:nth-last-child(n)/:last-of-type/:nth-last-of-type(n)
七掂咒、:first-child和:first-of-type的作用和區(qū)別
E:first-child的作用 是選擇E的父元素中的所有第一個子元素的E標(biāo)簽才沧；
E:first-of-type的作用是 選擇E的父元素中的第一個E類型的標(biāo)簽迈喉；
根據(jù)字面意思可以很好的理解這兩者的區(qū)別：E:first-child首選是E的父元素中的第一個子元素，在這些子元素中選中E標(biāo)簽温圆；E:first-of-type首選是E的父元素的第一個同類型的（E）標(biāo)簽挨摸；舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1:first-of-type
{
color: red;
}
</style>
</head>
<body>
<h1>這是body里的第一個子元素</h1>
<h1>這是body里的第二個子元素</h1>
<div>這是body里的第三個子元素 <br/>
<a href="#">這是body中的div中里的第一個子元素</a>
<h1>這是body中的div中里的第二個子元素</h1>
<h1>這是body中的div中里的第三個子元素</h1>
</div>
<h1>這是body里的第四個子元素</h1>
</body>
</html>
上述代碼的運行結(jié)果為:“這是body里的第一個子元素”及“這是body中的div中里的第二個子元素”字均變?yōu)榧t色；若將<style>中的 h1:first-child 改成h1:first-of-type岁歉，則該代碼運行結(jié)果為僅“這是body里的第一個子元素”字變?yōu)榧t色得运；運行結(jié)果可見我上傳至jsbin中的 http://jsbin.com/hacato/edit?html,output 及http://jsbin.com/turibag/edit?html,output
八、運行如下代碼锅移，解析下輸出樣式的原因熔掺。
<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>
運行結(jié)果為aa變紅，aa非剃、bb背景色均變?yōu)樗{色置逻，ccc不做任何變化；
原因為：
.item1:first-child{
color: red;
}
上述代碼的作用是選擇item1中的父元素中的第一個子元素并使其字體變?yōu)榧t色备绽；當(dāng)運行到<p class="item1">aa</p> 時券坞，aa變?yōu)榧t色，因為此時段落p是item1父元素div中的第一個子元素肺素，而h3中的bb及h3中的ccc的父元素也是div恨锚，但div中的第一個子元素為p，因此bb及ccc字體顏色均為默認值即不會變成紅色压怠；
.item1:first-of-type{
background: blue;
}
上述代碼的作用是選擇item1中的父元素中的第一個同類型標(biāo)簽并使其背景色變?yōu)樗{色眠冈；當(dāng)運行到<p class="item1">aa</p>時，因p為item1的父元素div的第一個類型的標(biāo)簽菌瘫，且p也為item1類蜗顽，因此p中的aa背景色會變成藍色；當(dāng)運行到<h3 class="item1">bb</h3>時雨让，同理雇盖，h3中的bb背景色也會變成藍色；當(dāng)運行到<h3 class="item1">ccc</h3>時栖忠，因父元素div中的第一個h3類型的元素已經(jīng)存在崔挖，故h3中的ccc背景色還是默認的；
故：運行結(jié)果為aa變紅庵寞，aa狸相、bb背景色均變?yōu)樗{色，ccc不做任何變化捐川；
九脓鹃、 text-align: center的作用是什么，作用在什么元素上古沥？能讓什么元素水平居中瘸右？
作用是使得文本或者img標(biāo)簽等一些內(nèi)聯(lián)對象（或與之相似的元素）居中娇跟；其可作用在塊級元素（比如p，h1等）中的內(nèi)行元素對象上太颤；如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
div{
text-align: center;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
上述代碼可將div中的p及h3中的文本和圖片均進行居中了苞俘。
另margin:0 auto 是設(shè)置塊級元素（或類似元素）的居中，注意與text-align:center的區(qū)別龄章，可詳見：http://www.cnblogs.com/zhwl/p/3529473.html
十吃谣、如果遇到一個屬性想知道兼容性，在哪查看?
可在caniuse.com和w3school.com.cn等網(wǎng)站進行查詢瓦堵。
十一基协、補充：關(guān)于 :nth-child選擇器
<div class="parent">
<div class="children first"></div>
<div class="children second"></div>
<div class="children third"></div>
<div class="children fourth"></div>
</div>
上述代碼要實現(xiàn).second同樣效果的選擇器歌亲，可采用以下方法：
- 1菇用、
.parent :nth-child(2) { /* :nth-child(2)前有空格！ 意義是父元素中的第二個子元素*/
height: 200px;
border-color: blue;
}
- 2陷揪、
.children:nth-child(2) { /* :nth-child(2)前無空格惋鸥！ 意義是屬于其父元素中的第二個子元素.children*/
height: 200px;
border-color: blue;
}
- 3、
.parent .children:nth-child(2) { /* :nth-child(2)前無空格悍缠！ 意義是屬于 .parent元素中的第二個子元素.children*/
height: 200px;
border-color: blue;
}
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有卦绣，如需轉(zhuǎn)載請注明出處。謝謝飞蚓！ *
