css選擇器有:1、類選擇器,使用語法為:“<p class="first"></p>”,在css中的樣式為“.first{樣式代碼;}”;2、ID選擇器,通過#符號加上id名稱組成,使用語法為:“<p id="polite"></p>”,在css中的樣式為“#polite{樣式代碼;}”;3、通用選擇器,為每一個頁面元素設(shè)置樣式,在css中的樣式為“*{樣式代碼;}”;4、屬性選擇器,它主要分為“存在和值屬性選擇器”和“子串值屬性選擇器”兩種;5、偽類和偽元素等等。
在CSS中,選擇器是一種模式,用于選擇需要添加樣式的元素。選擇器主要是用來確定html的樹形結(jié)構(gòu)中的DOM元素節(jié)點。
主要有以下幾種:
一:類選擇器
class元素可以有多個值,中間用空格隔開。一個文件中,可以有多個相同的class值。
<p class="first done"></p>
樣式:
.first{background-color: red;
}
二:ID選擇器
#(哈希)符號加上id名稱組成。但是單個文件中id值要保持唯一。一個element中只設(shè)置一個id。
<p id="polite"></p>
樣式:
#polite{text-transform: uppercase;
}
三:通用選擇器
* 允許選擇一個頁面的所有元素。
<p></p>
樣式:
* {text-decoration: line-through;
}
四:屬性選擇器
1:存在和值屬性選擇器(presence and value)
分為三種情況:屬性名存在;屬性名存在并且有對應(yīng)的值;屬性名存在并且包含對應(yīng)的值。
[attr] 只要包含該屬性即可。不論是否有值,不論值為何。
<p data-fruit></p>
樣式:
[data-fruit]{color: green;
}
[attr=val] 包含該屬性,并且值也相等。
<p data-fruit="apple"></p>
樣式:
[data-fruit="apple"]{color: red;
}
[attr~=val] 包含該屬性,并且該屬性中至少有一個值為val。
<p data-fruit="apple banana"></p><p data-fruit="apple"></p>
樣式:
[data-fruit~="apple"]{color: blue;
}
上面兩個標(biāo)簽都會被匹配到。
2:子串值屬性選擇器(substring value 也叫偽正則)
[attr|=val] 包含attr屬性,并且值為value,或者值是以val- 這樣的形式開頭。
[attr^=val] 包含attr屬性,并且值以val開頭。
[attr$=val] 包含attr屬性,并且值以val結(jié)尾。
[attr*=val] 包含attr屬性,并且值中包含子字符串val。
五:偽類(pseudo-class)
以:作為前綴,被添加到一個選擇器末尾的關(guān)鍵字。當(dāng)你希望樣式在特定狀態(tài)下才被呈現(xiàn)到指定的元素時,你可以往元素的選擇器后面加上偽類。
比如讓超鏈接,訪問前后樣式一致,同時鼠標(biāo)懸停時不一致。
a:visited{color: blue;
}
/** 選擇器上的逗號不能省略*/
a:hover,
a:active,
a:focus{
color: red;
text-decoration: none;
}
比如當(dāng)一個列表的偶數(shù)行和奇數(shù)行的背景不同
<ul><li><p>這是第一行</p></li>
<li>p>這是第一行</p></li>
<li>p>這是第一行</p></li>
<li>p>這是第一行</p></li>
</ul>
li:nth-of-type(2n){
background-color: red;
}
li:nth-of-type(2n+1){
background-color:blue;
}
這里的nth-of-type() 是匹配兄弟節(jié)點。因此不能寫成p:nth-of-type。另外如果使用的是nth-child()的話,它匹配的也是兄弟節(jié)點。雖然看名字像是一個孩子節(jié)點。
六:偽元素(Pseudo-element)
通過::這樣兩個冒號前綴,組合關(guān)鍵字,添加到某個元素的后面,去選擇該元素的某個部分。
<a href="http://www.moremom.com">moremom</a>a::after{
content:"后面追加內(nèi)容";
}
或者
[href^="http"]::after{
content:"后面追加的內(nèi)容";
}
七:組合器
名稱 | 組合器 | 選擇 |
---|---|---|
選擇器組 | A,B | 匹配A或B的任意元素 ,或者匹配A和B |
后代選擇器 | A B | B是A的后代節(jié)點,匹配B |
子選擇器 | A>B | B是A的直接子節(jié)點,匹配B |
相鄰兄弟選擇器 | A+B | B是A的下一個兄弟節(jié)點,B緊跟A,匹配B |
通用兄弟選擇器 | A~B | B是A之后的兄弟節(jié)點中的任一個,匹配B |