DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5新增的Css選擇器、偽類介紹
HTML5新增的Css選擇器、偽類介紹
編輯:HTML5詳解     
選擇器 
p[name^=“my”]{font-size:14px} 
選擇器 ^= 講規則應用到所有 name屬性以“my”開頭的<p>元素標簽 
p[name$=“my”]{font-size:14px} 
選擇器 $= 講規則應用到所有 name屬性以“my”結尾的<p>元素標簽 
p[name*=“my”]{font-size:14px} 
選擇器 $= 講規則應用到所有 name屬性包含“my”結尾的<p>元素上 
選擇器 > 、 + 、~ 
選擇器>表示受影響的元素是第一個元素的子元素。 
選擇器+這 個選擇器引用緊跟元素之後的元素,這兩個元素必須有相同父級。 
選擇器~與+類似,但受影響的元素不一定緊跟第一個元素。

偽類與引用元素名稱之間要加“:” 
例:myclass:nth-child(2) 
myclass元素中的第二個素 
關鍵字“odd” ,“even” 
myclass:nth-child(odd):影響其父元素索引位置為奇數的 
myclass:nth-child(even):影響其父元素索引位置為偶數的 

復制代碼代碼如下:
<style> 
.test:nth-child(odd) 

color:Blue; 

.test:nth-child(even) 

color: Red; 

.test:nth-child(2) 

color: Green; 

</style> 
<div class="test"> 
<p> 

</p> 
<p> 

</p> 
</div> 
<p class="test"> 

</p> 
<p class="test"> 

</p> 
<p class="test"> 

</p> 
<p class="test"> 

</p> 

效果如下: 






否定偽類 
:not(p){color:red} 
除了<p>元素之外的其他元素都為red
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved