一.選擇符模式
模式/含義/內容描述
* 匹配任意元素。(通用選擇器)
e 匹配任意元素 e (例如乙個型別為 e 的元素)。(型別選擇器)
e f
匹配元素 e 的任意後代元素 f 。(後代選擇器)
e > f
匹配元素 e 的任意子元素 f 。(子選擇器)
e:first-child
當元素 e 是它的父元素中的第乙個子元素時，匹配元素 e 。(:first-child 偽類)
e:link e:visited
如果 e 是乙個目標還沒有訪問過(:link)或者已經訪問過(:visited)的超連結的源錨點時匹配元素 e 。(link 偽類)
e:active e:hover e:focus
在確定的使用者動作中匹配 e 。(動態偽類)
e:lang(c)
如果型別為 e 的元素使用了(人類)語言 c (文件語言確定語言是如何被確定的)，則匹配該元素。(:lang() 偽類)
e + f
如果乙個元素 e 直接在元素 f 之前，則匹配元素 f 。(臨近選擇器)
e[foo]
匹配具有」foo」屬性集(不考慮它的值)的任意元素 e 。(屬性選擇器)
e[foo="warning"]
匹配其「foo」屬性值嚴格等於「warning」的任意元素 e 。(屬性選擇器)
e[foo~="warning"]
匹配其「foo」屬性值為空格分隔的值列表，並且其中乙個嚴格等於「warning」的任意元素 e 。(屬性選擇器)
e[lang|="en"]
匹配其「lang」屬性具有以「en」開頭(從左邊)的值的列表的任意元素 e 。(屬性選擇器)
div.warning
僅 html。用法同 div[class~="warning"]。(類選擇器)
e#myid
匹配 id 等於「myid」的任意元素 e 。(id 選擇器)
我們用下面的例子來解釋「[s]父元素[/s]」、「[s]子元素[/s]」、「[s]父/子[/s]」及「[s]相鄰[/s]」這幾個概念。
code:[copy to clipboard]
這是乙個段落p的內容！這裡是strong的內容這是乙個段落p的內容！
從以上**中，我們可以找出這樣的關係：
h1 和 p 同為 div 的「兒子」，兩者分別同 div 形成「父/子」關係。
h1,p,strong 都是 div 的「子元素」。（三者都包含在 div 之內）
div 是 h1 和 p 的「父元素」。
strong 和 p 形成「父/子」關係，strong 的「父元素」是 p 。
但 strong 和 div 並非「父/子」關係，而是「祖孫」關係，但 strong 依然是 div 的「子（孫）元素」。
div 是 h1 p strong 三者的「祖先」，三者是 div 的「子（孫）元素」。
h1 和 p 兩者是相鄰的。
繼承上面的例項來具體演示一下e f的關係：假如，我們需要將 strong 內的內容二字變為綠色，我們可以有哪些方法呢？
code:[copy to clipboard]div strong /* － 正確。strong 是 div 的「子元素」*/
p > strong /* － 正確。strong 和 p 是「父/子」關係*/
div > strong /* － 錯誤！strong 雖然是 div 的「子（孫）元素」，但兩者乃是「祖孫」關係，而非「父/子」關係，因此不能用 > 符號連線*/
臨近選擇器和通用選擇器：通用選擇器以星號「*」表示，可以用於替代任何 tag 。
例項：code:[copy to clipboard] h2 + * /*所有緊隨 h2 的元素內的文字都將呈現紅色*/
二.選擇符分類介紹
1.通配選擇符
語法：code:[copy to clipboard]*
說明：通配選擇符。選定文件目錄樹(dom)中的所有型別的單一物件。
假如通配選擇符不是單一選擇符中的唯一組成，「*」可以省略。
示例：code:[copy to clipboard]*[lang=fr]
*.div
2.型別選擇符
語法：code:[copy to clipboard]e
說明：型別選擇符。以文件語言物件(element)型別作為選擇符。
示例：code:[copy to clipboard]td
a 3.屬性選擇符
語法：code:[copy to clipboard]e [ attr ]
e [ attr = value ]
e [ attr ~= value ]
e [ attr |= value ]
說明：屬性選擇符。
選擇具有 attr 屬性的 e
選擇具有 attr 屬性且屬性值等於 value 的 e
選擇具有 attr 屬性且屬性值為一用空格分隔的字詞列表，其中乙個等於 value 的 e 。這裡的 value 不能包含空格
選擇具有 attr 屬性且屬性值為一用連字元分隔的字詞列表，由 value 開始的 e
示例：code:[copy to clipboard]h[title]
/* 所有具有title屬性的h物件 */
span[class=demo]
div[speed="fast"][dorun="no"]
code:[copy to clipboard]e1 e2
說明：包含選擇符。選擇所有被 e1 包含的 e2 。即 e1.contains(e2)==true 。
示例：code:[copy to clipboard]table td
div.sub a
5.子物件選擇符
語法：code:[copy to clipboard]e1 > e2
說明：子物件選擇符。選擇所有作為 e1 子物件的 e2 。
示例：code:[copy to clipboard]body > p
/* 所有作為body的子物件的p物件字型尺寸為14px */
div ul>li p
6.id選擇符
語法：code:[copy to clipboard]#id
說明：id選擇符。以文件目錄樹(dom)中作為物件的唯一識別符號的 id 作為選擇符。
示例：code:[copy to clipboard]#note
7.類選擇符
語法：code:[copy to clipboard]e.classname
說明：類選擇符。在html中可以使用此種選擇符。其效果等同於e [ class ~= classname ] 。請參閱屬性選擇符( attribute selectors )。
在ie5+，可以為物件的 class 屬性(特性)指定多於乙個值( classname )，其方法是指定用空格隔開的一組樣式表的類名。例如：。
示例：code:[copy to clipboard]div.note
/* 所有class屬性值等於（包含）"note"的div物件字型尺寸為14px */
.dream
/* 所有class屬性值等於（包含）"note"的物件字型尺寸為14px */
8.選擇符分組
語法：code:[copy to clipboard]e1 , e2 , e3
說明：選擇符分組。將同樣的定義應用於多個選擇符，可以將選擇符以逗號分隔的方式並為組。
示例：code:[copy to clipboard].td1,div a,body
td,div,a
9.偽類及偽物件選擇符
語法：code:[copy to clipboard]e : pseudo-classes
e : pseudo-elements
說明：偽類及偽物件選擇符。
偽類選擇符。請參閱偽類( pseudo-classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。
偽物件選擇符。請參閱偽物件( pseudo-elements )[:first-letter :first-line :before :after]。
示例：code:[copy to clipboard]div:first-letter
a.fly :hover
**自 閃動聯盟http://www.85flash.com/get/css/2006-8-23/170845705.htm
英文官方資料 http://www.w3.org/tr/css21/selector.html
jQuery選擇符 XPath選擇符
說明 jquery支援一組基本的xpath選擇符 可以和css選擇符一起使用 jquery無論對什麼文件都可以使用xpath和 css選擇符。1.屬性選擇符 2 特點 允許以類似正規表示式的語法來標識字串的開始 和結尾 也可以使用 表示字串的任意位置。1 a href mailto 表示取得以mai...
CSS選擇符 屬性選擇符
使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名，放在方括號裡 title css不限制屬性選擇符只能使用標籤名，也可以使用類。例如 photo title 用於選取類為photo，而且設定了ti...
CSS選擇符 型別選擇符
h1用於選取特定html標籤的選擇符，叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符，只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小，只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...