一菇肃、選擇器
| 選擇器 |
選擇器名稱 |
| # |
id選擇器 |
| . |
類選擇器 |
| div.box |
并集選擇器（中間沒有空格） |
| .box,.aa |
群組選擇器 |
| div .aa |
后代選擇器（中間有空格） |
| .list>.litem |
子代選擇器 |
| .item+.litem |
兄弟選擇器（只能選旁邊的一個(gè)） |
二读宙、偽類選擇器
| 選擇器 |
選擇器名稱 |
| :nth-child(n) |
選擇單行 |
| nth-child()奇數(shù)（偶數(shù)） |
奇（odd）偶（even）選擇器 |
| nth-child(3n+1) |
有規(guī)律的選擇器 |
| a:link |
鏈接未點(diǎn)擊之前選擇器 |
| a:visited |
鏈接已點(diǎn)擊之后選擇器 |
| .box::before |
元素前面加入偽類元素（文字用content） |
| .box::after |
元素后面加入偽類元素（文字用content） |
| .list>.litem |
子代選擇器 |
| .item+.litem |
兄弟選擇器（只能選旁邊的一個(gè)） |
三、css3選擇器
等于號(hào)后面的雙引號(hào)可加可不加
| 選擇器 |
選擇器名稱 |
| input[value] |
E[att] 選擇具有att屬性的E元素 |
| E[att=val] |
選擇具有att屬性且屬性值等于val的E元素 |
| E[att^=val] |
匹配具有att屬性且值以val開頭的E元素 |
| E[att$=val] |
匹配具有att屬性且值以val結(jié)尾的E元素 |
| E[att*="val"] |
匹配具有att屬性且值中含有val的E元素 |
| .box~p |
選擇.box元素所有的p元素兄弟 |
| input:checked+span |
已被選擇的輸入框的下一個(gè)span元素 |
| p::selection |
選中的文字變黃色 |
四、選擇器優(yōu)先級(jí)
1.內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式
2.！important>id選擇器>類選擇器>元素選擇器
3.就近原則
4.類名越多優(yōu)先級(jí)越高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>優(yōu)先級(jí)</title>
<style>
div{
color: red;
}
.aa{
color: green;
}
#aa{
color: yellow;
}
</style>
</head>
<body>
<div id="aa" class="aa">哈哈哈</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
