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

CSSの疑似クラスをアンカーする

CSS疑似クラスセレクター、つまり：active、：hover、：link、および：visitedを使用して、リンク/アンカーのさまざまな状態のスタイルを設定できます。適切に機能させるには、これらのセレクターの順序は-

である必要があります。
  • ：リンク
  • ：訪問済み
  • ：ホバー
  • ：アクティブ

CSS疑似クラスプロパティの構文は次のとおりです-

a:(pseudo-selector) {
   /*declarations*/
}

例

CSSアンカー疑似クラスを使用する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
a {
   margin: 20px;
   padding: 10px;
   border: 2px solid black;
   text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
   font-size: 1.1em;
}
a:link {
   text-decoration: none;
}
a:visited {
   color: blueviolet;
}
a:hover {
   color: orange;
   font-size: 150%;
   font-weight: bold;
   box-shadow: 0 0 5px 1px grey;
}
a:active {
   color: red;
   box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<h2>Your favourite sports?</h2>
<a href="#">Football</a>
<a href="">Cricket</a>
</div>
</body>
</html>

出力

初期出力-

CSSの疑似クラスをアンカーする

最初のリンクにカーソルを合わせると、次の出力が表示されます

CSSの疑似クラスをアンカーする

最初のリンクをクリックすると、次の出力が返されます-

CSSの疑似クラスをアンカーする

CSSアンカー疑似クラスの別の例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

出力

CSSの疑似クラスをアンカーする


  1. 疑似クラスとCSSクラス

    CSS疑似クラスは、要素自体ではなくCSSクラスと組み合わせて、Html要素へのより選択的なアプローチを提供できます。 例 CSS疑似クラスとCSSクラスを組み合わせる例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    margin: 10px;    padding: 10px;    text-align: center;    border: 1px solid black; } .Italy:l

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

    疑似クラスキーワードは、それが追加されるセレクターの特別な状態を指定するために使用されます。これにより、より詳細な制御が可能になり、ホバー、チェック、訪問などの特定の状態にあるセレクターをターゲットにできるようになりました。 以下は、CSSの疑似クラスを示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } a { &