一.選擇符模式
模式/含義/內容描述
* 匹配任意元素。(通用選擇器)
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]」這幾個概念。
這是乙個段落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 內的內容二字變為綠色，我們可以有哪些方法呢？
div strong /* － 正確。strong 是 div 的「子元素」*/
p > strong /* － 正確。strong 和 p 是「父/子」關係*/
div > strong /* － 錯誤！strong 雖然是 div 的「子（孫）元素」，但兩者乃是「祖孫」關係，而非「父/子」關係，因此不能用 > 符號連線*/
臨近選擇器和通用選擇器：通用選擇器以星號「*」表示，可以用於替代任何 tag 。
例項：h2 + * /*所有緊隨 h2 的元素內的文字都將呈現紅色*/
二.選擇符分類介紹
1.通配選擇符
語法：*
說明：通配選擇符。選定文件目錄樹(dom)中的所有型別的單一物件。
假如通配選擇符不是單一選擇符中的唯一組成，「*」可以省略。
示例：*[lang=fr]
*.div
2.型別選擇符
語法：e
說明：型別選擇符。以文件語言物件(element)型別作為選擇符。
示例：td
a 3.屬性選擇符
語法：e [ attr ]
e [ attr = value ]
e [ attr ~= value ]
e [ attr |= value ]
說明：屬性選擇符。
選擇具有 attr 屬性的 e
選擇具有 attr 屬性且屬性值等於 value 的 e
選擇具有 attr 屬性且屬性值為一用空格分隔的字詞列表，其中乙個等於 value 的 e 。這裡的 value 不能包含空格
選擇具有 attr 屬性且屬性值為一用連字元分隔的字詞列表，由 value 開始的 e
示例：h[title]
/* 所有具有title屬性的h物件 */
span[class=demo]
div[speed="fast"][dorun="no"]
e1 e2
說明：包含選擇符。選擇所有被 e1 包含的 e2 。即 e1.contains(e2)==true 。
示例：table td
div.sub a
5.子物件選擇符
語法：e1 > e2
說明：子物件選擇符。選擇所有作為 e1 子物件的 e2 。
示例：[copy to clipboard] [ - ]code:
body > p
/* 所有作為body的子物件的p物件字型尺寸為14px */
div ul>li p
6.id選擇符
語法：#id
說明：id選擇符。以文件目錄樹(dom)中作為物件的唯一識別符號的 id 作為選擇符。
示例：#note
7.類選擇符
語法：e.classname
說明：類選擇符。在html中可以使用此種選擇符。其效果等同於e [ class ~= classname ] 。請參閱屬性選擇符( attribute selectors )。
在ie5+，可以為物件的 class 屬性(特性)指定多於乙個值( classname )，其方法是指定用空格隔開的一組樣式表的類名。例如：。
示例：div.note
/* 所有class屬性值等於（包含）"note"的div物件字型尺寸為14px */
.dream
/* 所有class屬性值等於（包含）"note"的物件字型尺寸為14px */
8.選擇符分組
語法：e1 , e2 , e3
說明：選擇符分組。將同樣的定義應用於多個選擇符，可以將選擇符以逗號分隔的方式並為組。
示例：.td1,div a,body
td,div,a
9.偽類及偽物件選擇符
語法：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]。
示例：div:first-letter
a.fly :hover
CSS網頁製作技巧之控制網頁背景
我想大家常常為一些比較合適於自己的網頁背景的而發愁吧，這個我想也是有的，因為這些不是太大就是太小，或者太亂，那麼有沒有辦法讓能合自己的主頁的胃口呢？答案是肯定的。想知道怎麼來實現嘛，好吧，大家現在開始跟著我做，我保證大家一定一學就會。不過，我想在網上 成家 的朋友一般分為在網咖裡 開業 就像我一樣，...
網頁製作之Css帶來的好處
css css css是一套可行的 搞笑的網頁維護方法 幫網頁設計師統一維護眾多的頁面而不需要大量繁複的調整每乙個頁面 它的核心理念就是表現與結構分離 也就是說把頁面結構有條理有層次的工作讓 html 去完成,而如何呈現這些內容則由 css負責完成 舉個最簡單的例子 我們想在頁面上顯示 廊坊師範學院...
網頁製作之Css帶來的好處
css css css是一套可行的 搞笑的網頁維護方法 幫網頁設計師統一維護眾多的頁面而不需要大量繁複的調整每乙個頁面 它的核心理念就是表現與結構分離 也就是說把頁面結構有條理有層次的工作讓 html 去完成,而如何呈現這些內容則由 css負責完成 舉個最簡單的例子 我們想在頁面上顯示 廊坊師範學院...