在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。

"CSS" 列指示該屬性是在哪個(gè) CSS 版本中定義的。（CSS1、CSS2 還是 CSS3。）

選擇器語法

1，基本選擇器語法

選擇器	類型	功能描述
*	通配選擇器	選擇文檔中所以HTML元素
E	元素選擇器	選擇指定類型的HTML元素
#id	ID選擇器	選擇指定ID屬性值為“id”的任意類型元素
.class	類選擇器	選擇指定class屬性值為“class”的任意類型的任意多個(gè)元素
selector1,selectorN	群組選擇器	將每一個(gè)選擇器匹配的元素集合并

 

2，層次選擇器語法

選擇器	類型	功能描述
E  F	后代選擇器（包含選擇器）	選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi)
E>F	子選擇器	選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相鄰兄弟選擇器	選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面
E~F	通用選擇器	選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

 

3，動(dòng)態(tài)偽類選擇器語法

選擇器	類型	功能描述
E:link	鏈接偽類選擇器	選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點(diǎn)上
E:visited	鏈接偽類選擇器	選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點(diǎn)上
E:active	用戶行為選擇器	選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點(diǎn)和按鈕上
E:hover	用戶行為選擇器	選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hover
E:focus	用戶行為選擇器	選擇匹配的E元素，而且匹配元素獲取焦點(diǎn)

 

4，目標(biāo)偽類選擇器

選擇器	功能描述
E:target	選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向

 

5，UI元素狀態(tài)偽類選擇器語法

選擇器	類型	功能描述
E:checked	選中狀態(tài)偽類選擇器	匹配選中的復(fù)選按鈕或者單選按鈕表單元素
E:enabled	啟用狀態(tài)偽類選擇器	匹配所有啟用的表單元素
E:disabled	不可用狀態(tài)偽類選擇器	匹配所有禁用的表單元素

 6，結(jié)構(gòu)偽類選擇器使用語法

選擇器	功能描述
E:fisrt-child	作為父元素的第一個(gè)子元素的元素E。與E:nth-child(1)等同
E:last-child	作為父元素的最后一個(gè)子元素的元素E。與E:nth-last-child(1)等同
E:root	選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時(shí)該選擇器與html類型選擇器匹配的內(nèi)容相同
E F:nth-child(n)	選擇父元素E的第n個(gè)子元素F。其中n可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0.
E F:nth-last-child(n)	選擇父元素E的倒數(shù)第n個(gè)子元素F。此選擇器與E:nth-child(n)選擇器計(jì)算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最后一個(gè)元素，與last-child等同
E:nth-of-type(n)	選擇父元素內(nèi)具有指定類型的第n個(gè)E元素
E:nth-last-of-type(n)	選擇父元素內(nèi)具有指定類型的倒數(shù)第n個(gè)E元素
E:first-of-type	選擇父元素內(nèi)具有指定類型的第一個(gè)E元素，與E:nth-of-type(1)等同
E:last-of-tye	選擇父元素內(nèi)具有指定類型的最后一個(gè)E元素，與E:nth-last-of-type(1)等同
E:only-child	選擇父元素只包含一個(gè)子元素，且該子元素匹配E元素
E:only-of-type	選擇父元素只包含一個(gè)同類型子元素，且該子元素匹配E元素
E:empty	選擇沒有子元素的元素，而且該元素也不包含任何文本節(jié)點(diǎn)

注：（1），“ul>li:nth-child(3)”表達(dá)的并不是一定選擇列表ul元素中的第3個(gè)子元素li，僅有列表ul中第3個(gè)li元素前不存在其他的元素，命題才有意義，否則不會(huì)改變列表第3個(gè)li元素的樣式。

（2），:nth-child(n)  中參數(shù)只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 選擇的是奇數(shù)項(xiàng)，而使用:nth-last-child(odd) 選擇的卻是偶數(shù)項(xiàng)

7，否定偽類選擇器

選擇器	功能描述
E:not(F)	匹配所有除元素F外的E元素

8，屬性選擇器語法

選擇器	功能描述
[attribute]	用于選取帶有指定屬性的元素。
[attribute=value]	用于選取帶有指定屬性和值的元素。
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素。
[attribute|=value]	用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個(gè)單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個(gè)元素。
[attribute$=value]	匹配屬性值以指定值結(jié)尾的每個(gè)元素。
[attribute*=value]	匹配屬性值中包含指定值的每個(gè)元素。

注：例<div class="links item"></div>其中a[class="links"]{……} 是找不到匹配元素，只有a[class="links item"]{……}才匹配
 

選擇器	例子	例子描述	CSS
.class	.intro	選擇 class="intro" 的所有元素。	1
#id	#firstname	選擇 id="firstname" 的所有元素。	1
*	*	選擇所有元素。	2
element	p	選擇所有 <p> 元素。	1
element,element	div,p	選擇所有 <div> 元素和所有 <p> 元素。	1
element element	div p	選擇 <div> 元素內(nèi)部的所有 <p> 元素。	1
element>element	div>p	選擇父元素為 <div> 元素的所有 <p> 元素。	2
element+element	div+p	選擇緊接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	選擇帶有 target 屬性所有元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	選擇 lang 屬性值以 "en" 開頭的所有元素。	2
:link	a:link	選擇所有未被訪問的鏈接。	1
:visited	a:visited	選擇所有已被訪問的鏈接。	1
:active	a:active	選擇活動(dòng)鏈接。	1
:hover	a:hover	選擇鼠標(biāo)指針位于其上的鏈接。	1
:focus	input:focus	選擇獲得焦點(diǎn)的 input 元素。	2
:first-letter	p:first-letter	選擇每個(gè) <p> 元素的首字母。	1
:first-line	p:first-line	選擇每個(gè) <p> 元素的首行。	1
:first-child	p:first-child	選擇屬于父元素的第一個(gè)子元素的每個(gè) <p> 元素。	2
:before	p:before	在每個(gè) <p> 元素的內(nèi)容之前插入內(nèi)容。	2
:after	p:after	在每個(gè) <p> 元素的內(nèi)容之后插入內(nèi)容。	2
:lang(language)	p:lang(it)	選擇帶有以 "it" 開頭的 lang 屬性值的每個(gè) <p> 元素。	2
element1~element2	p~ul	選擇前面有 <p> 元素的每個(gè) <ul> 元素。	3
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每個(gè) <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每個(gè) <a> 元素。	3
:first-of-type	p:first-of-type	選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。	3
:last-of-type	p:last-of-type	選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。	3
:only-child	p:only-child	選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最后一個(gè)子元素開始計(jì)數(shù)。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬于其父元素第二個(gè) <p> 元素的每個(gè) <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最后一個(gè)子元素開始計(jì)數(shù)。	3
:last-child	p:last-child	選擇屬于其父元素最后一個(gè)子元素每個(gè) <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每個(gè) <p> 元素（包括文本節(jié)點(diǎn)）。	3
:target	#news:target	選擇當(dāng)前活動(dòng)的 #news 元素。	3
:enabled	input:enabled	選擇每個(gè)啟用的 <input> 元素。	3
:disabled	input:disabled	選擇每個(gè)禁用的 <input> 元素	3
:checked	input:checked	選擇每個(gè)被選中的 <input> 元素。	3
:not(selector)	:not(p)	選擇非 <p> 元素的每個(gè)元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

實(shí)例：

* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }

div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }

p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }

p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: " (" attr(href) ") "; }

jQuery 的選擇器可謂之強(qiáng)大無比，這里簡(jiǎn)單地總結(jié)一下常用的元素查找方法

$("#myELement")    選擇id值等于myElement的元素，id值不能重復(fù)在文檔中只能有一個(gè)id值是myElement所以得到的是唯一的元素
$("div")           選擇所有的div標(biāo)簽元素，返回div元素?cái)?shù)組
$(".myClass")      選擇使用myClass類的css的所有元素
$("*")             選擇文檔中的所有的元素，可以運(yùn)用多種的選擇方式進(jìn)行聯(lián)合選擇：例如$("#myELement,div,.myclass")

層疊選擇器：

$("form input")         選擇所有的form元素中的input元素
$("#main > *")          選擇id值為main的所有的子元素
$("label + input")     選擇所有的label元素的下一個(gè)input元素節(jié)點(diǎn)，經(jīng)測(cè)試選擇器返回的是label標(biāo)簽后面直接跟一個(gè)input標(biāo)簽的所有input標(biāo)簽元素
$("#prev ~ div")       同胞選擇器，該選擇器返回的為id為prev的標(biāo)簽元素的所有的屬于同一個(gè)父元素的div標(biāo)簽

基本過濾選擇器：

$("tr:first")               選擇所有tr元素的第一個(gè)
$("tr:last")                選擇所有tr元素的最后一個(gè)
$("input:not(:checked) + span")  

過濾掉：checked的選擇器的所有的input元素

$("tr:even")               選擇所有的tr元素的第0，2，4... ...個(gè)元素（注意：因?yàn)樗x擇的多個(gè)元素時(shí)為數(shù)組，所以序號(hào)是從0開始）
$("tr:odd")                選擇所有的tr元素的第1，3，5... ...個(gè)元素
$("td:eq(2)")             選擇所有的td元素中序號(hào)為2的那個(gè)td元素
$("td:gt(4)")             選擇td元素中序號(hào)大于4的所有td元素
$("td:ll(4)")              選擇td元素中序號(hào)小于4的所有的td元素
$(":header")
$("div:animated")

內(nèi)容過濾選擇器：

$("div:contains('John')") 選擇所有div中含有John文本的元素
$("td:empty")           選擇所有的為空（也不包括文本節(jié)點(diǎn)）的td元素的數(shù)組
$("div:has(p)")        選擇所有含有p標(biāo)簽的div元素
$("td:parent")          選擇所有的以td為父節(jié)點(diǎn)的元素?cái)?shù)組

可視化過濾選擇器：

$("div:hidden")        選擇所有的被hidden的div元素
$("div:visible")        選擇所有的可視化的div元素

屬性過濾選擇器：

$("div[id]")              選擇所有含有id屬性的div元素
$("input[name='newsletter']")    選擇所有的name屬性等于'newsletter'的input元素
$("input[name!='newsletter']") 選擇所有的name屬性不等于'newsletter'的input元素
$("input[name^='news']")         選擇所有的name屬性以'news'開頭的input元素
$("input[name$='news']")         選擇所有的name屬性以'news'結(jié)尾的input元素
$("input[name*='man']")          選擇所有的name屬性包含'news'的input元素
$("input[id][name$='man']")    可以使用多個(gè)屬性進(jìn)行聯(lián)合選擇，該選擇器是得到所有的含有id屬性并且那么屬性以man結(jié)尾的元素

子元素過濾選擇器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child")          返回所有的div元素的第一個(gè)子節(jié)點(diǎn)的數(shù)組
$("div span:last-child")           返回所有的div元素的最后一個(gè)節(jié)點(diǎn)的數(shù)組
$("div button:only-child")       返回所有的div中只有唯一一個(gè)子節(jié)點(diǎn)的所有子節(jié)點(diǎn)的數(shù)組

表單元素選擇器：

$(":input")                  選擇所有的表單輸入元素，包括input, textarea, select 和 button
$(":text")                     選擇所有的text input元素
$(":password")           選擇所有的password input元素
$(":radio")                   選擇所有的radio input元素
$(":checkbox")            選擇所有的checkbox input元素
$(":submit")               選擇所有的submit input元素
$(":image")                 選擇所有的image input元素
$(":reset")                   選擇所有的reset input元素
$(":button")                選擇所有的button input元素
$(":file")                     選擇所有的file input元素
$(":hidden")               選擇所有類型為hidden的input元素或表單的隱藏域

表單元素過濾選擇器：

$(":enabled")             選擇所有的可操作的表單元素
$(":disabled")            選擇所有的不可操作的表單元素
$(":checked")            選擇所有的被checked的表單元素
$("select option:selected") 選擇所有的select 的子元素中被selected的元素

 

選取一個(gè) name 為”S_03_22″的input text框的上一個(gè)td的text值

$(”input[@ name =S_03_22]“).parent().prev().text()

名字以”S_”開始，并且不是以”_R”結(jié)尾的

$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)

一個(gè)名為 radio_01的radio所選的值

$(”input[@ name =radio_01][@checked]“).val();

 
$("A B") 查找A元素下面的所有子節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)
$("A>B") 查找A元素下面的直接子節(jié)點(diǎn)
$("A+B") 查找A元素后面的兄弟節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)
$("A~B") 查找A元素后面的兄弟節(jié)點(diǎn)，不包括非直接子節(jié)點(diǎn)

1. $("A B") 查找A元素下面的所有子節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)

例子：找到表單中所有的 input 元素

HTML 代碼:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form input")

結(jié)果:

[ <input name="name" />, <input name="newsletter" /> ]

2. $("A>B") 查找A元素下面的直接子節(jié)點(diǎn)
例子：匹配表單中所有的子級(jí)input元素。

HTML 代碼:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form > input")

結(jié)果:

[ <input name="name" /> ]

3. $("A+B") 查找A元素后面的兄弟節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)
例子：匹配所有跟在 label 后面的 input 元素

HTML 代碼:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("label + input")

結(jié)果:

[ <input name="name" />, <input name="newsletter" /> ]


4. $("A~B") 查找A元素后面的兄弟節(jié)點(diǎn)，不包括非直接子節(jié)點(diǎn)
例子：找到所有與表單同輩的 input 元素

HTML 代碼:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form ~ input")

結(jié)果:

[ <input name="none" /> ] 

• jquery
• css