1 基本選擇器
(1)通用選擇器
- {
border: 1px solid red;
}
“*”號(hào)選擇器是通用選擇器跟衅，功能是匹配所有html 元素的選擇器包括<html>
和<body>標(biāo)簽
(2)元素選擇器
p {
color:red;
}
直接使用元素名稱(chēng)作為選擇器名稱(chēng)
(3)id選擇器
abc {
font-size: 20px;
}
<p id="abc">abc<p>
通過(guò)對(duì)元素設(shè)置全局屬性id注盈，然后使用#id 值來(lái)選擇頁(yè)面唯一元素
(4)類(lèi)選擇器
.abc {
border:1px solid red
}
<b classs="abc">b</b>
<span class="abc">span</span>
通過(guò)對(duì)元素設(shè)置全局屬性class罗标，然后使用.class 值選擇頁(yè)面一個(gè)或多個(gè)元素谣旁。
(5)屬性選擇器
[href]{
color:orange
}
<a >百度</a>
//所需版本CSS3
[href^="http"] {
color: orange;
}
解釋?zhuān)簩傩灾甸_(kāi)頭匹配的屬性選擇器。
//所需版本CSS3
[href$=".com"] {
color: orange;
}
解釋?zhuān)簩傩灾到Y(jié)尾匹配的屬性選擇器赃梧。
//所需版本CSS3
[href*="baidu"] {
color: orange;
}
解釋?zhuān)簩傩灾蛋付ㄗ址膶傩赃x擇器省核。
//所需版本CSS2
[class~="edf"] {
font-size: 50px;
}
解釋?zhuān)簩傩灾稻哂卸鄠€(gè)值時(shí)，匹配其中一個(gè)值
2 復(fù)合選擇器
將不同選擇器進(jìn)行組合成特定的匹配
(1)分組選擇器
p,b,span {
color:red;
}
將多個(gè)選擇器通過(guò)逗號(hào)分割航厚，同時(shí)設(shè)置一組樣式顷歌。當(dāng)然，不但可以分組元素選擇
器幔睬，還可以使用ID 選擇器眯漩、類(lèi)選擇器、屬性選擇器混合使用
(2)后代選擇器
p b {
color:red;
}
選擇<p>元素內(nèi)部所有<b>元素麻顶。不在乎<b>的層次深度赦抖。當(dāng)然，后代選擇器也可
以混合使用ID 選擇器辅肾、類(lèi)選擇器队萤、屬性選擇器。
(3)子選擇器
ul > li {
background:red;
}
<ul>
<li></li>
<li></li>
</ul>
子選擇器類(lèi)似與后代選擇器宛瞄，而最大的區(qū)別就是子選擇器只能選擇父元素向下一
級(jí)的元素浮禾，不可以再往下選擇。
(4)相鄰兄弟選擇器
p + b {
border: 10px solid red;
}
<p>段落</p>
<b>加粗</b>
相鄰兄弟選擇器匹配和第一個(gè)元素相鄰的第二個(gè)元素份汗。
(5)普通兄弟選擇器
p~b {
background:red
}
<p>段落</p>
<b>加粗</b>
<b></b>
普通兄弟選擇器匹配第一個(gè)元素后面的所有元素盈电。
