一、元素選擇器
h1 {
color: red;
}
選擇器組合(用逗號隔開，否則就是后代選擇器了)
h1, h2, h3 {
color: red;
}
二、通配選擇器
* {
color: red;
}
三、類選擇器 ID選擇器
獨立于文檔元素的方式來指定樣式
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選擇器區別
ID選擇器會使用一次，而且僅一次，如果一個元素的id為“xxx”,那么該文檔的其他元素的id都不能是“xxx”；ID選擇器不能結合使用,因為ID屬性不允許以空格分隔詞列表；如果你想確定應當向一個給定元素應用哪些元素時,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;
}
/*根據部分屬性值選擇*/
/* ~= 只能是具體值中的某個詞 比如you、are、wrong。 但是you a、you 、不行 */
/* ^= 以wrong開頭 */
/* $= 以wrong結尾 */
/* *= 包含wrong就行*/
div[property~="wrong"] {
color: blue;
}
六、后代選擇器
子元素、父元素
父子關系、祖先-后代關系
1.后代選擇器
ancestorSelector空格descendantsSelector {
選擇塊；
}
ancestorSelector的所有后代選擇器descendantsSelector都被選中
2.選擇子元素
fatherSelector > sonSelector {
選擇塊；
}
fatherSelector的所有子選擇器sonSelector都被選中
七、選擇相鄰兄弟
selector1 + selector2 {
選擇塊；
}
selector1的兄弟選擇器selector2被選中
八、偽類選擇器
/*根據語言選擇*/
*:lang(fr) {
font-style: italic;
}
/*********** 靜態偽類 **********/
/* 指向一個未訪問地址的所有錨 */
a.cxw:link {
color: purple;
}
/*指示已訪問地址超鏈接的所有錨*/
a.cxw:visited {
color: red;
}
/*********** 動態偽類 **********/
/*指示當前擁有輸如焦點的元素*/
a.cxw:focus {
color: black;
background-color: white;
}
/*指示鼠標指針停留在那個元素上*/
a.cxw:hover {
color: white;
background-color: red;
font-size: 30px;
}
/*指示被用戶輸入激活的元素*/
a.cxw:active {
}
/*********** 偽元素選擇器 **********/
/*設置首字母樣式*/
p:first-letter {
font-size: 200%;
color: red;
}
/*設置第一行的樣式*/
p:first-line {
color: purple;
}
/*********** first-child **********/
/*選擇第一個子元素*/
p:first-child {
}