CSS3 の新しい疑似クラスとは何ですか (コード付きの概要)-CSSチュートリアル-php.cn

CSS3 の新しい疑似クラスとは何ですか (コード付きの概要)

藏色散人

リリース： 2018-10-15 15:33:16

オリジナル

8548 人が閲覧しました

この記事では、主に css3 の新しい疑似クラス について紹介します。

まず、皆さんは CSS とは何かを知っておく必要がありますよね?

CSS は Cascading Style Sheet の略です。「カスケードスタイルシート」と訳されます。 Web ページのスタイルを (拡張) 制御し、Web コンテンツからスタイル情報を分離できるようにするために使用されるマークアップ言語です。簡単に言えば、CSS は Web ページのスタイルとレイアウトを制御するために使用されます。そして css3 は最新の CSS 標準です。

それでは、CSS2 標準と比較して、この最新の標準にはどのような新しい属性や疑似クラスがあるのでしょうか?

以下に、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>
<h1>:first-of-type使用示例</h1>
<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>
<h1>p:last-of-type使用示例</h1>
<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