CSS疑似クラスとは何ですか? CSS 疑似クラスの簡単な紹介 (例付き)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS疑似クラスとは何ですか? CSS 疑似クラスの簡単な紹介 (例付き)

不言

Nov 02, 2018 am 10:08 AM

css疑似クラス

要素に特定の状態を割り当てることができる CSS 疑似クラス。たとえば、ユーザーが Web ページ上の画像の上にカーソルを置くと、画像が別の画像に変わります。リンクは訪問後に色が変わり、未訪問のリンクと区別できます。フォーム上の入力ボックスは無効になっており、値がありません。疑似クラスはこれらの操作などを実装できます。通常の CSS クラスは疑似クラスとともに使用することもできます。

CSS3 では、以前の CSS2 よりも多くの疑似クラスが追加されています。 (推奨コース: css3 ビデオチュートリアル )

疑似クラスがセレクターに追加され、その前にコロンがあり、その後に括弧で囲まれた値を持つ属性が続きます。疑似クラスの構文は次のとおりです。

selector: pseudo-class { property:value;}

ログイン後にコピー

基本的な疑似クラス

さまざまな疑似クラスがあり、次のコード例はその一部を示しています。最も基本的な疑似クラス。これらは動的擬似クラスとして分類され、ユーザーのアクションによって変化します。コード例では、:link 疑似クラスを使用してリンクの色を青に設定しています。ユーザーがリンクにアクセスすると、:visited 疑似クラスを使用してリンクの色が栗色に変わります。また、デモンストレーション: ユーザーが画像上にマウスを移動すると、マウスを移動すると、白のテキストが入った紫色の円が、黄色のテキストが入ったピンクの四角形に変わります。 The:Focus 疑似クラスは、ユーザーが日付入力フィールドをクリックするか「フォーカス」すると、日付入力フィールドを灰色に変更します。コードサンプルはこちら自分で試してみてください。

<!DOCTYPE html>
<html>
<head>
<style>
a:link{
   color:blue;
}
a:visited{
  color:maroon;
}
div {
   background-color: purple;
   color: white;
   line-height:90px;
   font-size:20px;
   text-align:center;
   width:200px;
   height:200px;
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;
    border-radius: 100px;
}
div:hover {
   background-color:pink;
   color:yellow;
   width:200px;
   height:200px;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
}
input:focus {
  background-color: lightgray;
}
</style>
</head>
<body>
<p><b><a href="https://www.php.cn/" target="_blank">Click on this link!</a></b></p>
<div>Hover over this</div>
<p><b>Enter todays date in the field below</b></p>
<form>
Date: <input type="text" name="Date"><br>
</form>
</body>
</html>

ログイン後にコピー

その他の疑似クラス

より一般的に使用される疑似クラスのいくつかを以下にリストします。すべての疑似クラスの完全なリストはここにあります。

: first-child - このクラスを使用すると、親の最初の子である要素に特定のスタイルを追加できます。

:root- この疑似クラスは、ドキュメントのルート要素と一致するために使用されます。

: lang - 言語が異なれば、ルールや慣例も異なります。場合によっては、複数の言語で利用できるページを作成する必要があることがあります。 :lang 疑似クラスは、この状況に役立ちます。主に lang="" HTML 属性と要素を調べ、それに応じて要素を照合します。

: 無効 - テキストフィールドやボタンなどの入力要素が無効であることを示すことができます。

: fullscreen - この疑似クラスは要素をフルスクリーンモードで使用します。

疑似要素

疑似要素は、CSS によってスタイル設定でき、ユーザーエージェントによって追加できるという点で、疑似クラスと同様の機能を備えています。ただし、DOM に存在しない要素を使用できるという点で疑似クラスとは異なります。疑似要素の構文識別子は、通常、疑似クラスのような単一のコロンではなく、二重のコロンです。一般的な疑似要素は、 ::before 、 ::after 、および ::first-line です。一部のコーダーは単一のコロンを使用することに注意することが重要です。疑似要素の場合、これは CSS2 の規則です。疑似クラスと疑似要素の混同を避けるために、この点に留意してください。

#最後に

#疑似クラスを使用すると、要素に特別な状態を適用できます。これらを使用すると、開発者は JavaScript などのスクリプト言語を使用せずにクールなエフェクトを作成できます。コードをシンプルに保ちながら、ページをよりインタラクティブで興味深いものにすることができる疑似クラスにはさまざまな種類があります。

以上がCSS疑似クラスとは何ですか? CSS 疑似クラスの簡単な紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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