CSS選擇器回顧

符號

說明

用法

#id

Id選擇器

#id{ color:red; }

.class

類選擇器

.class{ //}

Element

標簽選擇器

P?{ //}

*

通配符選擇器

配合其他選擇器來使用

,

并集選擇器

div,p{}

?空格

后代選擇器

div span{}

選擇div下面所有后代的span

>

子代選擇器

div > span{}

+

緊鄰選擇器

div+p

選擇div緊挨著的下一個p元素

基本選擇器

符號

說明

用法

$(“#demo”)

選擇id為demo的第一個元素

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

$(“.liItem”)

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

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

$(“div”)

選擇所有標簽名字為div的元素

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

$(“*”)

選擇所有元素

少用或配合其他選擇器來使用

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

$(“.liItem,div”)

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

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

符號

說明

用法

?空格

后代選擇器

選擇所有的后代元素

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

>

子代選擇器

選擇所有的子代元素

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

+

緊鄰選擇器

選擇緊挨著的下一個元素

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

~

兄弟選擇器

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

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

基本過濾選擇器

符號

說明

用法

:eq(index)

index是從0開始的一個數字，選擇序號為index的元素。選擇第一個匹配的元素。

$(“li:eq(1)”). css(“background”,”red”)

:gt(index)

Index 是從0開始的一個數字，選擇序號大于index的元素

$(“li:gt(2)”). css(“background”,”red”)

:lt(index)

Index是從0開始的一個數字，選擇小于index 的元素

$(“li:lt(2)”). css(“background”,”red”)

:odd

選擇所有序號為奇數行的元素

$(“li:odd”). css(“background”,”red”)

:even

選擇所有序號為偶數的元素

$(“li:even”). css(“background”,”red”)

:first

選擇匹配第一個元素

$(“li:first”). css(“background”,”red”)

:last

選擇匹配的最后一個元素

$(“li:last”). css(“background”,”red”)

屬性選擇器

符號

說明

用法

$(“a[href]”)

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

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

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

選擇href屬性值為itcast的所有a標簽

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

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

選擇所有href屬性不等baidu的所有元素，包括沒有href的元素

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

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

選擇所有以web開頭的元素

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

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

選擇所有以cn結尾的元素

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

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

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

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

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

選擇所有符合指定屬性規則的元素，都符合才會被選中。

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