CSS3選擇器詳解

轉載自我的博客

1.經常使用選擇器

1.1標籤選擇器

p{ }/*選擇標籤名爲p的元素*/

1.2類選擇器

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

1.3ID選擇器

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

1.4通配符選擇器

*{ }/*選擇頁面中全部的元素*/

1.5選擇器前綴

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

1.6屬性選擇器

[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"的元素*/

2.僞類選擇器

2.1連接僞類

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

連接在進行設置時：a:hover 必須位於 a:link 和 a:visited 以後, a:active 必須位於 a:hover 以後。

2.2動態僞類

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

2.3樹形圖上的僞類
html結構以下：

<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（錨點）指向的元素。*/

3.僞元素選擇器

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

4.組合選擇器

4.1後代選擇器

.main h2{  }/*選擇class名爲mian元素內的全部h2標籤*/

4.2子選擇器

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

4.3相連選擇器

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

4.4兄弟選擇器

h2~p{}/*選擇h2標籤後出現的全部p標籤*/

4.4選擇器分組

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

5.繼承

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

• 繼承屬性

  • color

  • font

  • text-align

  • list-style

  • ...

• 非繼承屬性

  • background

  • border

  • position

  • ...

6.CSS優先級

• 計算方法

  • a = 行內樣式

  • b = ID選擇器的數量

  • c = 類/僞類和屬性選擇器的數量

  • d = 標籤選擇器和僞元素選擇器數量

value = a1000 + b100 + c*10 +d

!important強行提高優先級