CSS3新增了哪些偽類

發(fā)布時間：2020-07-10 16:42:04 來源：億速云閱讀：226 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)CSS3新增了哪些偽類，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

本篇文章主要給大家介紹css3新增偽類有哪些？

首先大家應該都知道css是什么吧？

CSS是Cascading Style Sheet的縮寫。譯作”層疊樣式表單“。是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。簡單的說CSS就是用于控制網(wǎng)頁的樣式和布局。而css3是最新的 CSS 標準。

那么這個最新的標準，相較于css2的標準有哪些新增的屬性或者偽類呢？

下面我們就為大家詳細總結(jié)介紹，css新增的一些偽類。

1、p:first-of-type

:first-of-type 選擇器匹配屬于其父元素的特定類型的首個子元素的每個元素。

使用示例：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>:first-of-type使用示例</title>
<head>
    <style>
        p:first-of-type
        {
            background:green;
        }
    </style>
</head>
<body>
<h2>:first-of-type使用示例</h2>
<p>這是第一個p元素。<br>:first-of-type，指定父元素的首個 p 元素的背景色。</p>
<p>這是第二個p元素</p>
<p>這是第三個p元素</p>
<p>這是第四個p元素</p>
</body>
</html>

效果如下圖：

CSS3新增了哪些偽類

2、p:last-of-type

:last-of-type 選擇器匹配屬于其父元素的特定類型的最后一個子元素的每個元素。

用法示例：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>:last-of-type使用示例</title>
<head>
    <style>
        p:last-of-type
        {
            background: #ff3844;
        }
    </style>
</head>
<body>
<h2>p:last-of-type使用示例</h2>
<p>這是第一個p元素。</p>
<p>這是第二個p元素</p>
<p>這是第三個p元素</p>
<p>這是第四個p元素<br>:last-of-type，指定父元素的最后一個 p 元素的背景色。</p>
</body>
</html>

效果如下圖：

CSS3新增了哪些偽類

3、p:only-of-type

:only-of-type 選擇器匹配屬于其父元素的特定類型的唯一子元素的每個元素。

使用方法與上述例子類似。

4、p:only-child

:only-child 選擇器匹配屬于其父元素的唯一子元素的每個元素。

5、p:nth-child(2)

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型。

n 可以是數(shù)字、關(guān)鍵詞或公式。

6、:enabled :disabled

表單控件的禁用狀態(tài)。

7、:checked

:checked 選擇器匹配每個選中的輸入元素（僅適用于單選按鈕或復選框）。

看完上述內(nèi)容，你們對CSS3新增了哪些偽類有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細節(jié)

CSS3新增了哪些偽類

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽