元素關系選擇器
| 名稱 |
舉例 |
意義 |
| 子選擇器 |
div>p |
div 的子標簽p |
| 相鄰兄弟選擇器 |
img+p |
圖片后面緊跟著的段落將被選中 |
| 通用兄弟選擇器 |
p~span |
p元素之后的所有同層級span元素 |
序號選擇器
- :first-child
選擇第一個子元素
eg:
.box1 p:first-child {
color: red
}
- :last-child
選擇最后一個子元素
eg:
.box1 p:last-child {
color: red
}
- :nth-child()
可以選擇任意序號的子元素
.box2 p:nth-child(3) {
color: green
}
:nth-child()可以寫成 an+b的形式，表示從b開始每a個選一個，注意不能寫為b+an
.box2 p:nth-child(3n+2) {
color: green
}
odd 等價于 2n+1，表示奇數(shù)
even 等價于 2n，表示偶數(shù)
.box2 p:nth-child(odd) {
color: green
}
- :nth-of-type()
將選擇同種標簽指定序號的子元素
- :nth-last-child() 和 :nth-last-of-type()
都是倒數(shù)選擇
序號選擇器的兼容性
| 選擇器 |
兼容性 |
| :first-child |
IE7 |
| :last-child |
IE9 |
| :nth-child(3) |
IE9 |
| :nth-of-type(3) |
IE9 |
| :nth-last-child(3) |
IE9 |
| :nth-last-of-type(3) |
IE9 |
屬性選擇器
| 舉例 |
意義 |
| img[alt] |
選擇有alt屬性的img標簽 |
| img[alt="故宮"] |
選擇alt屬性是故宮的img標簽 |
| img[alt^="北京"] |
選擇alt屬性以北京開頭的img標簽 |
| img[alt$="夜景"] |
選擇alt屬性以夜景結(jié)尾的img標簽 |
| img[alt*="美"] |
選擇有alt屬性中含有美字的img標簽 |
| img[alt~="手機拍攝"] |
選擇有alt屬性中有空格隔開的手機拍攝字樣的img標簽 |
| img[alt|="參賽作品"] |
選擇有alt屬性以"參賽作品-"開頭的img標簽 |
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
