問答
- CSS選擇器常見的有幾種?
id選擇器
#idName {}
類選擇器
.className {}
標(biāo)簽選擇器
p {}
通配
* {}
包含選擇器
E F
子選擇器
E>F
相鄰選擇器
E+F
兄弟選擇器
E~F
屬性選擇器
E[atl]
屬性值選擇器
E[atl="val"]
- 選擇器的優(yōu)先級是怎樣的?
簡單的就是 通配選擇器<標(biāo)簽選擇器<類選擇器<id選擇器
| 選擇器 | 特殊性 | 以10為基礎(chǔ)的特殊性 |
|---|---|---|
| style="" | 1,0,0,0 | 1000 |
| #wrapper #content {} | 0,2,0,0 | 200 |
| #content .datePosted {} | 0,1,1,0 | 110 |
| div#content {} | 0,1,0,1 | 101 |
| #content {} | 0,1,0,0 | 100 |
| p.content .datePosted {} | 0,1,1,0 | 21 |
| #content {} | 0,1,1,0 | 11 |
| div p {} | 0,1,1,0 | 2 |
| p {} | 0,1,1,0 | 1 |
值越大優(yōu)先級越高
- class 和 id 的使用場景?
class 復(fù)用性高
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
.box{
display: inline-block;
width: 50px;
height: 50px;
border: 1px red solid;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Paste_Image.png
id 具有唯一性 方便js操作
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
.box{
overflow: hidden;
display: inline-block;
width: 50px;
height: 50px;
border: 1px red solid;
}
</style>
<script type="text/javascript">
window.onload=function () {
var oP=document.getElementById('p1');
oP.innerHTML="321";
}
</script>
</head>
<body>
<div class="box"><p id="p1">123</p></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Paste_Image.png
- 使用CSS選擇器時為什么要劃定適當(dāng)?shù)拿臻g？
1 方便看 比如.head nav 就能知道是頭部的導(dǎo)航欄
2 可以重復(fù)利用
- 以下選擇器分別是什么意思?
#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
####### header
選擇id為header的元素
.header
選擇class為header的元素
.header .logo
選擇class為header元素下class為logo的元素
.header.mobile
選擇class為header moblie的元素或者是moblie header的元素
.header p, .header h3
選擇class為header元素下的所有p、h3標(biāo)簽
#header .nav>li
選擇id為header元素下class為nav元素下的直接子li標(biāo)簽
####### header a:hover
選擇id為header下的a標(biāo)簽的hover(鼠標(biāo)懸停)狀態(tài)
- 列出你知道的偽類選擇器
a標(biāo)簽偽類速記love hate
| 選擇符 | 版本 | 描述 |
|---|---|---|
| E:link | css1 | 設(shè)置超鏈接a在未訪問前的樣式 |
| E:visited | css1 | 設(shè)置超鏈接a在其鏈接地址已被訪問過的樣式 |
| E:hover | css1/2 | 設(shè)置元素在其鼠標(biāo)懸停時的樣式 |
| E:active | css1/2 | 設(shè)置元素在被用戶激活（在鼠標(biāo)點擊與釋放之間發(fā)生的事件）時的樣式 |
| E:focus | css1/2 | 設(shè)置元素在成為輸入焦點（該元素的onfocus事件發(fā)生）時的樣式 |
| E:lang(fr) | css2 | 匹配使用特殊語言的E元素 |
| E:not(s) | css3 | 匹配不含有s選擇符的元素E |
| E:root | css3 | 匹配E元素在文檔的根元素 |
| E:first-child | css2 | 匹配父元素的第一個子元素E |
| E:last-child | css2 | 匹配父元素的最后一個子元素E |
| E:only-child | css3 | 匹配父元素僅有的一個子元素E |
| E:nth-child(n) | css3 | 匹配父元素的第n個子元素E |
| E:nth-last-child(n) | css3 | 匹配父元素的倒數(shù)第n個子元素E |
| E:first-of-type | css3 | 匹配同類型中的第一個同級兄弟元素E |
| E:last-of-type | css3 | 匹配同類型中的最后一個同級兄弟元素E |
| E:only-child | css3 | 匹配同類型中的唯一的一個同級兄弟元素E |
| E:nth-of-type(n) | css3 | 匹配同類型中的第n個同級兄弟元素E |
| E:nth-last-of-type(n) | css3 | 匹配同類型中的倒數(shù)第n個同級兄弟元素E |
| E:empty | css3 | 匹配沒有任何子元素（包括text節(jié)點）的元素E |
| E:checked | css3 | 匹配用戶界面上處于選中狀態(tài)的元素E。(用于input type為radio與checkbox時) |
| E:enabled | css3 | 匹配用戶界面上處于可用狀態(tài)的元素E |
| E:disabled | css3 | 匹配用戶界面上處于禁用狀態(tài)的元素E |
| E:target | css3 | 匹配相關(guān)URL指向的E元素 |
| E:@page:first | css2 | Pseudo-Classes Selectors index設(shè)置頁面容器第一頁使用的樣式。僅用于@page規(guī)則 |
| E:@page:lest | css2 | Pseudo-Classes Selectors index設(shè)置頁面容器位于裝訂線左邊的所有頁面使用的樣式。僅用于@page規(guī)則 |
| E:@page:right | css2 | Pseudo-Classes Selectors index設(shè)置頁面容器位于裝訂線右邊的所有頁面使用的樣式。僅用于@page規(guī)則 |
- :first-child和:first-of-type的作用和區(qū)別
E:first-child 匹配的是父級元素下一個E元素(如果是第二個就無效)
E：first-of-type匹配同級兄弟E元素（只要有E元素就會匹配到第一個）
p:first-child{color:red;}
<body>
<p>可以匹配到</p>
</body>
可以匹配到p元素
p:first-child{color:red;}
<body>
<span>span1<span>
<p>無法匹配到</p>
</body>
無法匹配到p元素
p:first-of-type
<body>
<span>span1<span>
<p>可以匹配到</p>
<p>第二個p不可以匹配到</p>
</body>
可以匹配到第一個p元素
p:first-of-type
<body>
<p>可以匹配到</p>
<p>第二個p不可以匹配到</p>
</body>
可以匹配到p元素
- 運行如下代碼，解析下輸出樣式的原因。
<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>
.item1:first-child{}
匹配到div中 第一個class為item1的p元素 aa變成紅色
.item1:first-of-type{}
匹配到class為item1的p元素和h3元素中的第一個 aa和bb背景色為藍色
- text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
作用是居中
作用在塊級元素上
可以上行內(nèi)元素元素居中（可以設(shè)置文字 圖片 和行內(nèi)元素的居中）
- 如果遇到一個屬性想知道兼容性，在哪查看?
http://caniuse.com/ 可以查看
本教程版權(quán)歸菲龍?zhí)诫?yún)和饑人谷所有，轉(zhuǎn)載須說明來源
