CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

疑似クラスとすべてのCSSクラス

疑似クラスキーワードは、それが追加されるセレクターの特別な状態を指定するために使用されます。これにより、より詳細な制御が可能になり、ホバー、チェック、訪問などの特定の状態にあるセレクターをターゲットにできるようになりました。

以下は、CSSの疑似クラスを示すコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
   font-size: 18px;
   font-weight: bold;
}
a:link {
   color: rgb(17, 0, 255);
}
a:visited {
   color: rgb(128, 0, 107);
}
a:hover {
   color: rgb(255, 105, 243);
}
a:active {
   color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>Pseudo class example</h1>
<a href="#">This is some sample link text</a>
<h2>Hover , click on the above link to see the pseudo class in action</h2>
</body>
</html>

出力

上記のコードは次の出力を生成します-

疑似クラスとすべてのCSSクラス

リンクの上にカーソルを合わせると-

疑似クラスとすべてのCSSクラス

リンクをクリックすると-

疑似クラスとすべてのCSSクラス

もう一度同じページに戻ると、リンク状態が訪問済みに変わります。

疑似クラスとすべてのCSSクラス


  1. IE8以下を含むすべてのWebブラウザーのCSS画像の不透明度

    プロパティの不透明度は、究極の最新のソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、IE 9以降、およびGoogleChromeのすべてのバージョンで機能します。 -moz-opacityプロパティは、0.9より古いFirefoxバージョンの不透明度プロパティです。–khtml-opacityプロパティは、1から始まるサファリバージョン用です。filterプロパティは、不透明度のような効果を与える5〜9のIEブラウザ用です。 以下は、すべてのブラウザでCSSを使用した画像の不透明度のコードです- 例 <!DOCTYPE html> <

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

    疑似クラス 疑似クラスは、：hover、：active、：last-childなどのセレクターの状態を表します。これらは単一のコロン（:)で始まります。 CSS疑似クラスの構文は次のとおりです- :pseudo-class{ attribute: /*value*/ } 疑似要素 同様に、疑似要素は、::after、::before、::first-lineなどの仮想要素を選択するために使用されます。 これらは二重コロン（::）で始まります。 CSS疑似要素の構文は次のとおりです- ::pseudo-element{ attribute: /*value*/ } 例 次