CSS3新增選擇器

 

一、E:nth-child(n)：匹配元素類型爲E且是父元素的第n個子元素

<style type="text/css">

.list div:nth-child(2){

background-color:red;

}

</style>

......

<div class="list">

<h2>1</h2>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

</div>

 

<!-- 第2個子元素div匹配 -->

 

二、E:nth-last-child(n)：匹配元素類型爲E且是父元素的倒數第n個子元素（與上一項順序相反）

三、E:first-child：匹配元素類型爲E且是父元素的第一個子元素

四、E:last-child：匹配元素類型爲E且是父元素的最後一個子元素

五、E:only-child：匹配元素類型爲E且是父元素中惟一的子元素

六、E:nth-of-type(n)：匹配父元素的第n個類型爲E的子元素

七、E:nth-last-of-type(n)：匹配父元素的倒數第n個類型爲E的子元素（與上一項順序相反）

八、E:first-of-type：匹配父元素的第一個類型爲E的子元素

九、E:last-of-type：匹配父元素的最後一個類型爲E的子元素

十、E:only-of-type：匹配父元素中惟一子元素是E的子元素

十一、E:empty 選擇一個空的元素

十二、E:enabled 可用的表單控件

1三、E:disabled 失效的表單控件

1四、E:checked 選中的checkbox

1五、E:not(s) 不包含某元素

<style type="text/css">

.list div:not(:nth-child(2)){

background-color:red;

}

</style>

......

<div class="list">

<h2>1</h2>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

</div>

 

<!-- 第 三、四、5 子元素div匹配 -->

1六、E:target 對應錨點的樣式

<style type="text/css">

h2:target{

color:red;

}

</style>

......

<a href="#tit01">標題一</a>

......

<h2 id="tit01">標題一</h2>

 

<!-- 點擊連接，h2標題變紅 -->

 

1七、E > F E元素下面第一層子集

1八、E ~ F E元素後面的兄弟元素

1九、E + F 緊挨着的兄弟元素

 

屬性選擇器：

一、E[data-attr] 含有data-attr屬性的元素

<style type="text/css">

div[data-attr='ok']{

color:red;

}

</style>

......

<div data-attr="ok">這是一個div元素</div>

 

<!-- 點擊連接，h2標題變紅 -->

 

二、E[data-attr='ok'] 含有data-attr屬性的元素且它的值爲「ok」

三、E[data-attr^='ok'] 含有data-attr屬性的元素且它的值的開頭含有「ok」

四、E[data-attr$='ok'] 含有data-attr屬性的元素且它的值的結尾含有「ok」

五、E[data-attr*='ok'] 含有data-attr屬性的元素且它的值中含有「ok」