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

との差 。およびCSSの＃セレクター

'。'セレクター

'。'セレクターはクラスレベルのセレクターです。ドット演算子は、複数のhtml要素に適用できるスタイルクラスを作成するために使用されます。

「＃」セレクター

'＃'セレクターは要素レベルのセレクターです。ハッシュ演算子は、IDが「＃」セレクターで使用されるものと同じである特定の要素にスタイルを適用するために使用されます

例

例に従って、「。」の使用法を示します。 3つのdiv要素の「＃」セレクターも同様です。

<!DOCTYPE html>
<html>
<head>
   <title>Selector Example>/title>
   <style>
      .blackBorder {
         border: 2px solid black;
      }
      #redDiv {
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <div> No Border Box </div>
   <div class="blackBorder"> Black Border Box </div>
   <div id="redDiv"> Red Border Box </div>
   <div> No Border Box </div>
   <div class="blackBorder"> Black Border Box </div>
</body>
</html>

  1. CSS表示と可視性の違い

    CSSVisibilityプロパティとCSSDisplayプロパティをそれぞれ使用して、HTMLドキュメント内の要素を非表示または削除できます。ユーザーには、2つのプロパティのいずれを使用しても違いはないように見えるかもしれませんが、違いはあります。 CSSディスプレイ − noneはドキュメント上の要素をレンダリングしないため、スペースを割り当てません。 CSSの可視性 − hiddenはドキュメント上の要素をレンダリングし、スペースも割り当てられますが、ユーザーには表示されません。 例 CSS表示の例を見てみましょうなし- <!DOCTYPE html> <html

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

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