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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

藏色散人

Oct 15, 2018 pm 03:33 PM

この記事では、主に 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 id="first-of-type使用示例">: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 id="p-last-of-type使用示例">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

:only-of-type セレクターは、親要素の特定の型の唯一の子要素であるすべての要素と一致します。

使用方法は上記例と同様です。

4. p:only-child

:only-child セレクターは、親要素の唯一の子要素であるすべての要素と一致します。

5, p:nth-child(2)

:nth-child(n) セレクターは、要素の種類に関係なく、親要素に属する N 番目の子要素と一致します。

n には、数値、キーワード、または数式を指定できます。

6. :enabled :disabled

フォームコントロールの無効な状態。

7, :checked

: チェックされたセレクターは、選択されたすべての入力要素と一致します (ラジオボタンまたはチェックボックスにのみ適用されます)。

この記事は、

css3 の新しい疑似クラス

の紹介です。困っている友人のお役に立てれば幸いです。フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイト

CSS3 ビデオチュートリアル

、Bootstrap ビデオチュートリアル、およびその他の関連ビデオチュートリアルを参照してください。 . 皆さんもぜひ参考にして学んでください！

以上がCSS3 の新しい疑似クラスとは何ですか (コード付きの概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。