CSS3選擇器詳解

p{ }/*選擇標簽名為p的元素*/

.box{ }/*選擇class名為box的元素*/

#pid{ }/*選擇id名為pid的元素*/

*{ }/*選擇頁面中所有的元素*/

div.bd{}/*選中class名為bd且標簽為div的元素*/

[disabled]{}/*選擇帶有屬性disabled的所有元素*/
[type=button]{}/*選擇type屬性為button的所有元素*/
[class~=sports]{}/*選擇class屬性包含sports所有元素*/
[lang|=en]{  }/*選擇以lang屬性以"en"開頭以及以"-"分隔的所有元素*/
a[href^="#"]{ }/*選擇href屬性以"#"開頭的a元素*/
[href$="pdf"]{  }/*選擇href屬性以"pdf"結尾的元素*/
[href*="lady.163.com"]{}/*選擇href屬性中包含"lady.163.com"的元素*/

/*前兩個只可用于描元素（鏈接）*/
a:link {color:#FF0000;}     /* 未被訪問的鏈接 */
a:visited {color:#00FF00;}  /* 已被訪問的鏈接 */
/*后兩個可以用于其它元素*/
a:hover {color:#FF00FF;}    /* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;}   /* 正在被點擊的鏈接 */

input:focus{}/*設置input元素獲得焦點后的樣式*/
input:enabled{}/*元素可用的狀態*/
input:disabled{}/*元素不可用的狀態，屬性選擇器[disabled]的簡寫*/
input:checked{}/*單選框或者復選框選擇的樣式*/

<ul>
    <li>1</li>
    <li>2</li>
    <li><a href="#">3</a></li>
    <li>4</li>
    <p>5</p>
</ul>

ul:first-child{}/*選擇第一個ul下第一個標簽（css2定義，支持ie7）在處理margin時很有用*/

/*以下全是CSS3新增的偽類*/
ul:last-child{}/*選擇最后一個li標簽*/
ul:nth-child(n){}/*選擇()內的表達式如：[2n+1]，或者數字所代表的li標簽*/
ul:nth-last-child(n)/*同上，反向選擇*/
ul:only-child{}/*選擇ul只有一個子元素的項，這里會選中第三個li下的a標簽*/
ul:first-of-type{}/*選擇第一個該類型的標簽，會選擇第一個li和p*/
ul:last-of-type{}/*選擇最后一個該類型的標簽，會選擇第四個li和p*/
ul:nth-last-of-type(2n){  }/*倒數的選擇(.)內的表達式[2n]，或數字所代表的該類型標簽。選擇第一個和第三個li標簽*/
ul:only-of-type{}/*選擇ul下中只有一個該類型的項，會選中a標簽和p標簽*/
:root{}/*選擇文檔的根元素*/
ul:not(li){}/*選擇不含有li標簽的元素，這里會選中a標簽和p元素*/
ul:empty{}/*匹配ul下沒有任何子元素（包括text節點）的元素，這里匹配不到，把p標簽中的5刪除，可匹配成功*/
E:target{}/*匹配相關URL（錨點）指向的元素。*/

::first-letter{}/*選擇第一個字母*/
::first-line{}/*選擇第一行*/
::before{content:"before";}/*在某個元素之前插入一些內容*/
::after{content:"after";}/*在某個元素后插入一些內容*/
::selection{}/*設置于被用戶選中時的樣式*/
::placeholder{}/*設置對象文字占位符的樣式*/

.main h2{  }/*選擇class名為mian元素內的所有h2標簽*/

.main>h2{  }/*選擇class名為mian元素內的直接關聯與父元素的h2標簽*/

h2~p{}/*只要P標簽前有h2標簽便選擇*/

h2~p{}/*選擇h2標簽后出現的所有p標簽*/

h1,h2,h3{backgound-color:#ddd;}/*同時設置h1,h2,h3標簽,使用","分隔*/

body{font-family:"Microsoft Yahei";}/*設置頁面中所有的字體為微軟雅黑*/