コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS の疑似クラスと疑似要素の違い

CSS の疑似クラスと疑似要素の違い

PHPz
リリース： 2023-08-27 09:33:02
転載
1059 人が閲覧しました

疑似クラス

疑似クラスは、:hover、:active、:last-child などのセレクターのステータスを表します。コロン (:) で始まります。

CSS 疑似クラスの構文は次のとおりです。 -

:pseudo-class{
   attribute: /*value*/
}
ログイン後にコピー

疑似要素

同様に、疑似要素は、::after などの仮想要素を選択するために使用されます。 、::before、::first -line など。

これらは二重コロン (::) で始まります。

CSS 疑似要素の構文は次のとおりです。 -

::pseudo-element{
   attribute: /*value*/
}
ログイン後にコピー

例

次の例は、CSS 疑似クラスと疑似要素のプロパティを示しています。

ライブ デモンストレーション 

<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
   padding: 3%;
   font-size:1.4em;
   color: tomato;
   background: bisque;
}
</style>
</head>
<body>
<p>You&#39;re somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>
ログイン後にコピー

出力

これにより、次の結果が生成されます。

CSS の疑似クラスと疑似要素の違い

例

ライブデモ 

<!DOCTYPE html>
<html>
<head>
<style>
p::after {
   content: " BOOM!";
   background: hotpink;
}
p:last-child {
   font-size: 1.4em;
   color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>
ログイン後にコピー

出力

これにより、次の結果が生成されます -

CSS の疑似クラスと疑似要素の違い

以上がCSS の疑似クラスと疑似要素の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：tutorialspoint.com
前の記事：ビューポートの定義 次の記事：CSS @import 使用法: ルール
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2628
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2752
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2334
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
2196
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2304
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート