引言：css樣式規則有兩個主要部分。選擇器決定將格式化應用到哪些元素。宣告則定義要應用的格式化。
選擇器可以定義五個不同的標準來選擇要進行格式化的元素。
元素的型別或者名稱。如下所示。
h1
元素所在的上下文。如下所示。
h1 em
元素的類或id。如下所示。
/*類選擇器
*/.error
/*id 選擇器
*/#gaudi
元素的偽類或偽元素。如下所示。
a:link
元素是否有某些屬性和值。如下所示。
a[title]
選擇要格式化的元素，最常見的標準可能是元素的名稱。如下所示：
h2
按照型別選擇要格式化的元素
輸入selector,其中selector是目標元素的型別名稱。
輸入結束樣式規則。
元素中標識了class或id，可以在選擇器中使用這個標準，從而支隊已標識的元素進行格式化。推薦使用類選擇器。如下所示：
/*類選擇器
*/.error
/*id 選擇器
*/#gaudi
按類選擇要格式化的元素
輸入.（點號）。
不加空格，直接輸入classname.
輸入結束樣式規則。
按id選擇要格式化的元素
輸入#（井號）。
不加空格，直接輸入id。
輸入結束樣式規則。
根據元素的祖先、父元素或同胞元素來定位需要格式化的元素。
祖先（ancestor）是包含目標（後代，descendant）元素的任何元素，不管它們之間隔了多少代。
按祖先元素選擇要格式化的元素
輸入希望格式化的元素的祖先元素的選擇器。
輸入乙個空格。
如果需要，對後續的每個祖先元素重複以上兩步。
輸入希望格式化的元素的選擇器。
.architect p
按父元素選擇要格式化的元素
輸入希望格式化的元素的父元素的選擇器。
輸入》（大於號）。
如果需要，對後續每代父元素重複以上兩步。
輸入希望格式化的元素的選擇器。
.architect>p
按相鄰同胞元素選擇要格式化的元素
輸入包含在同一父元素中的、直接出現在目標元素前面的元素選擇器。
輸入+（加號）。
如果需要，對每個後續的同胞元素重複以上兩步。
輸入要格式化的元素的選擇器。
.architect p+p
有時需要選擇僅作為某元素第乙個或最後乙個子元素的元素。需要使用偽類:firsh-child和:last-child。如下：
li:frist-childli:last-child
選擇某元素的第乙個或者最後乙個子元素進行格式化
輸入代表我們想應用樣式的第乙個或者最後乙個子元素。
選擇第乙個子元素輸入:first-child。最後乙個子元素輸入:last-child。
分別使用:first-letter和:first-line偽元素只選擇元素的第乙個字母或第一行。如下：
p:first-letterp:first-line
選擇元素的第乙個字母
輸入要對其格式化的元素選擇器。
輸入:first-letter。
選擇元素的第一行
輸入要對其第一行進行格式化的元素的選擇器。
輸入:first-line。
css允許根據鏈結的當前狀態對他們進行格式化。
按狀態選擇要格式化的鏈結元素的步驟
輸入a（a是鏈結元素的名稱）。
輸入：（冒號），前後都沒有空格。
完成第2步後，執行下列操作影響鏈結狀態。
輸入link以設定從未被啟用或指向，當前頁沒有被啟用或指向的鏈結的外觀。
輸入visited以設定訪問者已啟用過鏈結的外觀。
輸入focus，前提是鏈結是通過鍵盤選擇並已準備好啟用的。
輸入hover以設定游標指向鏈結時鏈結的外觀。
輸入active以設定啟用過的鏈結的外觀。
/*未訪問過
*/a:link
/*訪問過的鏈結
*/a:visited
/*鏈結獲取焦點
*/a:focus
/*游標停留在連線上
*/a:hover
/*啟用鏈結時
*/a:active
一定要按照以下的順序定義規則：link、visited、focus、hover、active（縮寫為lvfha）。
對給定屬性或屬性值的元素進行格式化。例如：
p[class]
按屬性選擇要格式化的元素
輸入要考察其屬性的元素的選擇器。
輸入[。
輸入選擇元素需要考察的屬性的名稱。
根據需要輸入屬性的匹配符號和匹配值。
輸入。如果想要為元素指定其他屬性或者屬性值。重複2-4步驟。
屬性選擇器參考表選擇器
屬性值[attribute]
匹配指定屬性，不論具體指是什麼。
[attribute="value"]
完全匹配指定屬性值。
[attribute~="value"]
屬性值是以空格分隔的多個單詞，其中有乙個完全匹配指定值。
[attribute|="value"]
屬性值以value-打頭。
[attribute^="value"]
屬性值以value開頭，value為完成的單詞或單詞的一部分。
[attribute$="value"]
屬性值以value結尾，value為完整的單詞或單詞的一部分。
[attribute*="value"]
屬性值為指定值的子字串。
/*選擇rel屬性值等於external的a元素
*/a[rel="external"]
/*配置以空格相隔的多個單詞中的乙個
*/article[class~="barcelona"]
/*這個選擇器也能匹配，因為這個選擇器匹配部分字串
*/article[class*="barcelona"]
/*選擇任何帶有lang屬性且屬性值以es開頭的h2
*/h2[lang|="es"]
/*選擇任何帶有lang屬性且屬性值以es開頭的元素
*/*[lang|="es"]
/*選擇既有href屬性，又有任意是屬性值包含單詞howdy的title屬性的a元素
*/a[href][title~="howdy"]
/*選擇既有href屬性，又有任意屬性值包含how的title屬性的a元素
*/a[href][title*="how"]
/*匹配href屬性值以http://開頭的a元素
/*匹配任何src屬性值完全等於logo.png的img元素
*/img[src="logo.png"]
/*匹配任何src屬性值以.png結尾的img元素
*/img[src$=".png"]
對於使用相同樣式規則的多個元素，可以使用元素組設定樣式規則。
將樣式應用於元素組的步驟
輸入第乙個元素名稱。
輸入，（逗號）。
輸入第二個元素名稱。
對其他元素重複第二和第三步。
h1,h2
現實中常常需要組合使用以上技術，才能找到要格式化的元素。如：
/*選擇em元素，包含在p元素中，這樣的p元素是lang屬性值以es開頭的h2元素的直接相鄰同胞元素，且class等於project的任何元素的子元素
*/.project h2[lang|="es"]+p em
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
CSS3選擇器 屬性選擇器
指定屬性名，但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名，並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名，具...