CSS選擇器回顧

符號(hào)

說(shuō)明

用法

#id

Id選擇器

#id{ color:red; }

.class

類選擇器

.class{ //}

Element

標(biāo)簽選擇器

P?{ //}

*

通配符選擇器

配合其他選擇器來(lái)使用

,

并集選擇器

div,p{}

?空格

后代選擇器

div span{}

選擇div下面所有后代的span

>

子代選擇器

div > span{}

+

緊鄰選擇器

div+p

選擇div緊挨著的下一個(gè)p元素

基本選擇器

符號(hào)

說(shuō)明

用法

$(“#demo”)

選擇id為demo的第一個(gè)元素

$(“#demo”).css(“background”,”red”)

$(“.liItem”)

選擇所有類名（樣式名）為liItem的元素

$(“.liItem”). css(“background”,”red”);

$(“div”)

選擇所有標(biāo)簽名字為div的元素

$(“div”). css(“background”,”red”);

$(“*”)

選擇所有元素

少用或配合其他選擇器來(lái)使用

$(“*”). css(“background”,”red”)

$(“.liItem,div”)

選擇多個(gè)指定的元素，這個(gè)地方是選擇出了 .liItem元素和div元素

$(“.liItem,div”). css(“background”,”red”)

符號(hào)

說(shuō)明

用法

?空格

后代選擇器

選擇所有的后代元素

$(“div span”). css(“background”,”red”);

>

子代選擇器

選擇所有的子代元素

$(“div > span”). css(“background”,”red”)

+

緊鄰選擇器

選擇緊挨著的下一個(gè)元素

$(“div + p”). css(“background”,”red”)

~

兄弟選擇器

選擇后面的所有的兄弟元素

$(“div ~ p”). css(“background”,”red”)

基本過(guò)濾選擇器

符號(hào)

說(shuō)明

用法

:eq(index)

index是從0開始的一個(gè)數(shù)字，選擇序號(hào)為index的元素。選擇第一個(gè)匹配的元素。

$(“l(fā)i:eq(1)”). css(“background”,”red”)

:gt(index)

Index 是從0開始的一個(gè)數(shù)字，選擇序號(hào)大于index的元素

$(“l(fā)i:gt(2)”). css(“background”,”red”)

:lt(index)

Index是從0開始的一個(gè)數(shù)字，選擇小于index 的元素

$(“l(fā)i:lt(2)”). css(“background”,”red”)

:odd

選擇所有序號(hào)為奇數(shù)行的元素

$(“l(fā)i:odd”). css(“background”,”red”)

:even

選擇所有序號(hào)為偶數(shù)的元素

$(“l(fā)i:even”). css(“background”,”red”)

:first

選擇匹配第一個(gè)元素

$(“l(fā)i:first”). css(“background”,”red”)

:last

選擇匹配的最后一個(gè)元素

$(“l(fā)i:last”). css(“background”,”red”)

屬性選擇器

符號(hào)

說(shuō)明

用法

$(“a[href]”)

選擇所有包含href屬性的元素

$(“a[href]”). css(“background”,”red”)

$(“a[href=’itcast’]”)

選擇href屬性值為itcast的所有a標(biāo)簽

$(“a[href=’itcast’]”). css(“background”,”red”)

$(“a[href!=’baidu’]”)

選擇所有href屬性不等baidu的所有元素，包括沒(méi)有href的元素

$(“a[href!=’baidu’]”). css(“background”,”red”)

$(“a[href^=’web’]”)

選擇所有以web開頭的元素

$(“a[href^=’web’]”). css(“background”,”red”)

$(“a[href$=’cn’]”)

選擇所有以cn結(jié)尾的元素

$(“a[href$=’cn’]”). css(“background”,”red”)

$(“a[href*=’i’]”)

選擇所有包含i這個(gè)字符的元素，可以是中英文

$(“a[href*=’i’]”). css(“background”,”red”)

$(“a[href][title=’我’]”)

選擇所有符合指定屬性規(guī)則的元素，都符合才會(huì)被選中。

$(“a[href][title=’我’]”). css(“background”,”red”)