HTML5新增了Css選擇器、偽類，本文整理了一些，并給出簡單的使用介紹，喜歡html5的朋友可以參考下，希望對大家有所幫助

選擇器

p[name^=“my”]{font-size:14px}

選擇器 ^= 講規(guī)則應用到所有 name屬性以“my”開頭的<p>元素標簽

p[name$=“my”]{font-size:14px}

選擇器 $= 講規(guī)則應用到所有 name屬性以“my”結(jié)尾的<p>元素標簽

p[name*=“my”]{font-size:14px}

選擇器 $= 講規(guī)則應用到所有 name屬性包含“my”結(jié)尾的<p>元素上

選擇器 > 、 + 、~

選擇器>表示受影響的元素是第一個元素的子元素。

選擇器+這 個選擇器引用緊跟元素之后的元素，這兩個元素必須有相同父級。

選擇器~與+類似，但受影響的元素不一定緊跟第一個元素。

偽類與引用元素名稱之間要加“:”

例：myclass:nth-child(2)

myclass元素中的第二個素

關(guān)鍵字“odd” ，“even”

myclass:nth-child(odd)：影響其父元素索引位置為奇數(shù)的

myclass:nth-child(even)：影響其父元素索引位置為偶數(shù)的

代碼如下:

<style>

.test:nth-child(odd)

{

color:Blue;

}

.test:nth-child(even)

{

color: Red;

}

.test:nth-child(2)

{

color: Green;

}

</style>

<div class="test">

<p>

1

</p>

<p>

2

</p>

</div>

<p class="test">

1

</p>

<p class="test">

2

</p>

<p class="test">

1

</p>

<p class="test">

2

</p>

效果如下：

1

2

1

2

1

2

否定偽類

:not(p){color:red}

除了<p>元素之外的其他元素都為red