一、元素選擇器
h1 {
color: red;
}
選擇器組合(用逗號(hào)隔開循签，否則就是后代選擇器了)
h1, h2, h3 {
color: red;
}
二、通配選擇器
* {
color: red;
}
三疙咸、類選擇器 ID選擇器
獨(dú)立于文檔元素的方式來指定樣式
1.類選擇器
<div class="className"></div>
.className {
color: red;
}
2.多類選擇器
<div class="className1">1</div> /* red*/
<div class="className2">2</div>/* red*/
<div class="className1 className2">3</div>/* yellow*/
.className1 {
color: red;
}
.className2 {
color: green;
}
.className1.className2 {
color: yellow;
}
3.ID選擇器
<div id="id1">1</div>
<div id="id2">2</div>
#id1 {
color: blue;
}
#id2 {
color: purple;
}
4.類選擇器和ID選擇器區(qū)別
ID選擇器會(huì)使用一次县匠，而且僅一次，如果一個(gè)元素的id為“xxx”,那么該文檔的其他元素的id都不能是“xxx”撒轮；ID選擇器不能結(jié)合使用,因?yàn)镮D屬性不允許以空格分隔詞列表乞旦；如果你想確定應(yīng)當(dāng)向一個(gè)給定元素應(yīng)用哪些元素時(shí),ID可能包含更多含義。
五题山、屬性選擇器
<div property="I am jax">jax</div>
<div property="you are wrong">wrong</div>
/*簡單屬性值選擇*/
div[property] {
color: red;
}
/*具體屬性值選擇*/
div[property="I am jax"] {
color: green;
}
div[property="you are wrong"] {
color: purple;
}
/*根據(jù)部分屬性值選擇*/
/* ~= 只能是具體值中的某個(gè)詞 比如you兰粉、are、wrong顶瞳。 但是you a玖姑、you 、不行 */
/* ^= 以wrong開頭 */
/* $= 以wrong結(jié)尾 */
/* *= 包含wrong就行*/
div[property~="wrong"] {
color: blue;
}
六慨菱、后代選擇器
子元素焰络、父元素
父子關(guān)系、祖先-后代關(guān)系
1.后代選擇器
ancestorSelector空格descendantsSelector {
選擇塊符喝；
}
ancestorSelector的所有后代選擇器descendantsSelector都被選中
2.選擇子元素
fatherSelector > sonSelector {
選擇塊闪彼；
}
fatherSelector的所有子選擇器sonSelector都被選中
七、選擇相鄰兄弟
selector1 + selector2 {
選擇塊协饲；
}
selector1的兄弟選擇器selector2被選中
八畏腕、偽類選擇器
/*根據(jù)語言選擇*/
*:lang(fr) {
font-style: italic;
}
/*********** 靜態(tài)偽類 **********/
/* 指向一個(gè)未訪問地址的所有錨 */
a.cxw:link {
color: purple;
}
/*指示已訪問地址超鏈接的所有錨*/
a.cxw:visited {
color: red;
}
/*********** 動(dòng)態(tài)偽類 **********/
/*指示當(dāng)前擁有輸如焦點(diǎn)的元素*/
a.cxw:focus {
color: black;
background-color: white;
}
/*指示鼠標(biāo)指針停留在那個(gè)元素上*/
a.cxw:hover {
color: white;
background-color: red;
font-size: 30px;
}
/*指示被用戶輸入激活的元素*/
a.cxw:active {
}
/*********** 偽元素選擇器 **********/
/*設(shè)置首字母樣式*/
p:first-letter {
font-size: 200%;
color: red;
}
/*設(shè)置第一行的樣式*/
p:first-line {
color: purple;
}
/*********** first-child **********/
/*選擇第一個(gè)子元素*/
p:first-child {
}