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>

<p>

1

</p>

<p>

2

</p>

</div>

<p>

1

</p>

<p>

2

</p>

<p>

1

</p>

<p>

2

</p>

效果如下：

1

2

1

2

1

2

否定偽類

:not(p){color:red}

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