CSS選擇器
選擇器語法描述示例
標(biāo)簽選擇器
E{
CSS規(guī)則;
}
以文檔元素作為選擇符
td{
font-size:14px;
width:200px;
}
a{
text-decoration:none;
}
ID選擇器
#ID{
css規(guī)則；
}
以文檔元素的唯一標(biāo)識符ID作為選擇符
#note{
font-size:14px;
width:200px;
}
類選擇器
E.className{
CSS規(guī)則；
}
以文檔元素的Class作為選擇符
div.note{
font-size:14px;
}
.dream{
font-size:14px;
}
群組選擇器
E1,E2,E3{
css規(guī)則；
}
多個選擇符應(yīng)用同樣的樣式規(guī)則
td,p,div.a{
font-size:14px;
}
后代選擇器
E F{
css規(guī)則；
}
元素E的任意后代元素F
#link a{
color:red;
}
通配選擇符
*{
CSS規(guī)則；
}
以文檔的所有元素作為選擇符
*{
font-size:14px;
}
2. jQuery選擇器。
基本選擇器：
選擇器描述返回示例
#id 根據(jù)給定的id匹配一個元素單個元素$("#test")選取id為test的元素
.class根據(jù)給定的類名匹配元素集合元素$(".test")選取所有class為test的元素
element根據(jù)給定的元素名匹配元素集合元素$("p")選取所有的<p>元素
*匹配所有元素集合元素$("*")選取所有的元素
selector1,selector2,...,selectorN 將每一個選擇器匹配到的元素合并后一起返回集合元素$("div,span,p.myclass")選取所有<div>,<span>和擁有class為myClass的<p>標(biāo)簽的一組元素
層次選擇器：
選擇器描述返回示例
$("ancestor desendant")
選取ancestor元素里的所有
descendant（后代）元素
集合元素
$("div span")選取<div>里的所有的
<span>元素
$("parent>child")選取parent元素下的child(子)元素 集合元素
$("div>span")選取<div>元素下元素
名是<span>的子元素
$("prev+next")
選取緊接在prev元素后的next元素
prev唯一，即返回單一元素，
否則為集合元素
$(".one+div")選取class為one
的下一個div元素，等同與
$(".one").next("div")
$("prev~siblings")選取prev元素后的所有siblings元素 集合元素
$("#two~div")獲取id為two的元素后面的所有<div>
兄弟元素，等同與
$("#two").nextAll("div")
$("#prev").siblings("div")選取與id為prev的所有同輩元素 集合元素
3. 過濾選擇器：以：號開頭
基本過濾選擇器：
選擇器描述返回示例
:first選取第一元素單個元素$("div:first")選取所有<div>元素中第一個<div>元素
:last選取最后一個元素單個元素$("div:last")選取所有<div>元素中最后一個<div>元素
:not(selector)去除所有與給定選擇器匹配的元素集合元素$("input:not(.myClass)")選取Class不是myClass的所有的input元素
:even選取索引是偶數(shù)的所有元素，從0計(jì)起集合元素$("input:even")選取索引為偶數(shù)的<input>元素
:odd選取索引是奇數(shù)的所有元素，從0記起 集合元素$("input:odd")選取索引為奇數(shù)的<input>元素
:eq(index)選取索引是index的元素，index從0記起單個元素$("input:eq(index)")選取索引是index的<input>元素
:gt(index)選取索引大于index的元素集合元素$("input:gt(index)")選取索引大于index的<input>元素
:lt(index)選取索引小于index的元素集合元素$("input:lt(index)")選取索引小于index的<input>元素
:header 選取所有的標(biāo)題元素，例如h1,h2,h3等集合元素 $(":header")選取網(wǎng)頁中所有的<h1>,<h2>,<h3>等元素
:animated 選取當(dāng)前正在執(zhí)行動畫的所有元素 集合元素 $("div:animated")選取網(wǎng)頁中正在執(zhí)行動畫的<div>元素
內(nèi)容過濾選擇器
選擇器描述返回示例
:contains(text)選取含有文本內(nèi)容為“text”的元素集合元素$("div:contains('我')")選取含有文本“我”的<div>元素
:empty選取不包含子元素或者文本的空元素集合元素$("div:empty")選取不包含子元素（包括文本元素）的<div>空元素
:has(selector)選取含有選擇器所匹配的元素的元素集合元素$("div:has(p)")選取含有<p>元素的<div>元素
:parent選取含有子元素或者文本的元素集合元素$("div:parent")選取擁有子元素（包括文本元素）的<div>元素
可見性過濾選擇器
選擇器描述返回示例
:hidden選取所有不可見的元素集合元素
$(":hidden")選取所有不可見的元素。包括<input type="hidden"/>，
<div style="display:none;">和<div style="visibility:hidden;">
等元素。如果只想選不可見的<input>元素，可用$("input:hidden")
:visible選取所有可見的元素集合元素$("div:visible")選取所有可見的<div>元素
屬性過濾選擇器
選擇器描述返回示例
[attribute]選取擁有此屬性的元素集合元素$("div[id]")選取擁有屬性id的<div>元素
[attribute=value]選取屬性的值為value的元素集合元素$("div[title=test]")選取屬性title的值為"test"的<div>元素
[attribute!=value]選取屬性的值不為value的元素集合元素$("div[title!=test]")選取屬性title的值不為"test“的<div>元素
[attribute^=value]選取屬性的值以value開始的元素 集合元素 $("div[title^=test]")選取屬性title的值以"test”開始的<div>元素
[attribute$=value]選取屬性的值以value結(jié)束的元素集合元素$("div[title$=test]")選取屬性title的值以"test"結(jié)束的<div>元素
[attribute*=value] 選取屬性的值含有value的元素集合元素$("div[title*=test]")選取屬性title的值含有"test"的<div>元素
[selector1][selector2
][selectorN]
用屬性選擇器合并成一個復(fù)合選擇器，
滿足多個條件，沒選擇一次，
縮小一次選擇范圍
集合元素
$("div[id][title=test]")選取擁有屬性id，且屬性title等于"test"的
<div>元素
子元素過濾選擇器
選擇器描述返回示例
:nth-child
選取每個父元素下的第index個子元素或者奇偶元素
（index從1算起）
集合元素
$("div.one :nth-child(2)")選取class為one的
<div>元素下的第二個子元素
:first-child選取每個父元素的第一個子元素集合元素$("ul li:first-child")選取每個<ul>中第一個<li>元素
:last-child選取每個父元素的最后一個子元素集合元素$("ul li:last-child")選取每個<ul>中最后一個<li>元素
:only-child如果某個元素是它父元素中的唯一一個，即被選中集合元素$("ul li:only-child")在<ul>中選取是唯一子元素的<li>元素
表單對象屬性過濾選擇器
選擇器描述返回示例
:enable選取所有可用元素集合元素$("#form1 :enable")選取id為form的表單內(nèi)所有可用的元素
:disable選取所有不可用的元素集合元素$("#form1 :disable")選取id為form1的表單內(nèi)所有不可用的元素
:checked選取所有被選中的元素(單選框、復(fù)選框)集合元素$("input :checked")選取所有被選中的<input>元素
:selected選取所有被選中的選項(xiàng)元素（下拉列表）集合元素$("select :selected")選取所有被選中的選項(xiàng)元素
表單選擇器
選擇器描述返回示例
:input
選取所有的<input>、<textarea>、<select>和<button>元素
集合元素$(":input")選取所有的<input>、<textarea>、<select>和<button>元素
:text選取所有的單行文本框 集合元素$(":text")選取所有的單行文本框
:password選取所有的密碼框集合元素$(":password“)選取所有的密碼框
:radio選取所有的單選框集合元素$(":radio")選取所有的單選框
:checkbox選取所有的多選框集合元素$(":checkbox")選取所有的多選框
:submit選取所有的提交按鈕集合元素$(":submit")選取所有的提交按鈕
:iamge選取所有的圖像按鈕集合元素$(":image")選取所有的圖像按鈕
:reset選取所有的重置按鈕集合元素$(":reset")選取所有的重置按鈕
:button選取所有的按鈕集合元素$(":button")選取所有的按鈕
:file選取所有的上傳域集合元素$(":file")選取所有的上傳域
:hidden選取所有不可見元素
