HTML5新增的Css選擇器和偽類是什么

本篇內(nèi)容介紹了“HTML5新增的Css選擇器和偽類是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

選擇器

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元素中的第二個素

關鍵字“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

“HTML5新增的Css選擇器和偽類是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！