CSS セレクターの紹介-CSSチュートリアル-php.cn

CSS セレクターの紹介

DDD

リリース： 2025-01-22 00:13:10

オリジナル

352 人が閲覧しました

このレッスンでは、カスケードスタイルシート (CSS) を使用して HTML ビジュアルを強化する方法について詳しく説明します。まずは、特定の HTML 要素をターゲットにするためのツールである CSS セレクターから始めます。

カスケードスタイルシート (CSS)

CSS は、HTML コンポーネントの外観 (色、間隔、サイズなど) を決定します。インライン style 属性 ( など) を使用して個々の要素のスタイルを設定できますが、これは大規模な Web サイトでは非効率的です。

より効果的なアプローチには、HTML の <style> セクション内で <head> 要素を使用するか、style.css:<link> を使用して HTML にリンクされた別の CSS ファイル (

など) を使用します。

<code class="language-html">  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style></code>

ログイン後にコピー

または

<code class="language-html"><!-- index.html -->
<link href="style.css" rel="stylesheet"></code>

ログイン後にコピー

<code class="language-css">/* style.css */
p {
  color: red;
  text-decoration: underline;
}</code>

ログイン後にコピー

これは、すべての  要素に同じスタイルを適用します。ブラウザ開発者ツール (例: Chrome の右クリック、[検査]) を使用すると、適用されたスタイルを調べて変更し、トラブルシューティングを行うことができます。

HTML 要素の選択

p の p { color: red; } は、すべての  要素を選択します。より複雑な構造の場合、id 属性と class 属性を使用すると、より詳細な制御が可能になります。

クラスと ID セレクター

各要素は一意の id を持つことができます。 ID セレクター (#idName) は、id によって要素をターゲットにします。ただし、id は一意である必要があり、柔軟性が制限されます。

クラスはより多用途性を提供します。複数の要素が同じクラスを共有できます。クラスセレクター (.className) は、そのクラスを持つ要素を対象とします。要素は複数のクラスを持つことができます (例: )。

.red-text { color: red; } は、red-text クラスのすべての要素をスタイルします。 p.red-text は、 を持つ red-text 要素のみを具体的にスタイルします。

コンビネータセレクター

ドキュメントオブジェクトモデル (DOM) は、ページの構造をツリーとして表します。コンビネータセレクタはこの階層を利用します。

過度に複雑なコンビネータの組み合わせは推奨されません。これらをクラスセレクター (例: .intro p) と組み合わせることができます。

擬似セレクター

疑似クラスセレクターは、状態に基づいて要素のスタイルを設定します (例: a:hover、a:active、a:visited)。疑似要素セレクターは、要素の一部をターゲットとします (例: ::first-letter)。

その他のセレクター

さらに読む:

この投稿は元々 TheDevSpace に掲載されたものです。

以上がCSS セレクターの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。