CSSセレクターとは何ですか?

<p>CSS セレクターは、CSS スタイル シートでスタイルが適用される HTML 要素を指定する方法を指します。セレクターは、CSS を介してスタイルがどの HTML 要素にバインドされるかを決定するため、非常に重要です。 CSS セレクターは、CSS プログラミングで学ばなければならない基本的な知識です。正しいセレクターにより、コードの可読性と保守性が向上し、開発者が独自のスタイル ルールをより迅速に実装できるようになります。この記事では、CSS セレクターの基本的なタイプをいくつか紹介します。

要素セレクター

<p>要素セレクターは、CSS の最も基本的なセレクター タイプの 1 つで、HTML 要素のタグ名に基づいて要素を選択できます。たとえば、すべての <p> 要素のフォントの色を赤として定義したい場合、次のコードを使用できます。

p {
  color: red;
}

<p> このようにして、すべての段落テキストは次のようになります。赤。

クラス セレクター

<p>クラス セレクターは、要素で指定されたクラス属性に基づいて要素を選択する識別子です。 HTML では、要素に 1 つ以上のクラスを指定できます。各クラスはスペースで区切られます。クラス セレクターを使用して、CSS プロパティを特定のクラスに設定できます。

<p class="highlight">This text will be highlighted in some way.</p>

.highlight {
  background-color: yellow;
}

<p>この例では、クラス「highlight」を持つすべての要素の背景色を黄色に設定します。

ID セレクター

<p>クラス セレクターと同様に、ID セレクターは、要素で指定された ID 属性に基づいて要素の識別子を選択します。 ID は要素を一意に識別するため、各 ID 値は各 HTML ドキュメント内で一意です。この ID セレクターを使用して、CSS プロパティを特定の要素にバインドできます。

<p id="main-heading">This is the main heading of the page.</p>

#main-heading {
  font-size: 24px;
}

<p> この例では、ID セレクターを使用して、ID「main-Heading」を持つすべての要素のフォント サイズを 24px に設定します。

属性セレクター

<p>属性セレクターは、要素で指定された属性に基づいて要素の識別子を選択します。属性セレクターを使用して、特定の属性を持つすべての要素の CSS プロパティを設定できます。属性セレクターを使用すると、属性が特定の値に一致するかどうかをさらに判断できます。

<input type="text" value="Input text here">
<input type="submit" value="Submit">

input[type="text"] {
  width: 200px;
}

input[type="submit"] {
  background-color: blue;
  color: white;
}

<p> この例では、属性セレクターを使用してすべての <input> 要素を選択します 幅を設定しますtype 属性を持つ要素の text を 200px に設定し、type 属性を持つ要素の背景色とフォント色を submit に設定します。青に設定します。白に設定します。

疑似クラス セレクター

<p>疑似クラス セレクターは、標準の HTML 属性または要素タイプでは選択できない要素の特定の状態またはポイントを選択するセレクターです。 CSS では、コロン (:) を使用して疑似クラス セレクターを定義します。

<p>一般的に使用されるいくつかの疑似クラス セレクターを次に示します:

<ul> <li> :hover: マウスが要素上をスライドしたときの状態 <li> :active: 要素をクリックしたときの状態 <li> :visited: リンクにアクセスしたときの状態 <li> :focus: 要素 マウスフォーカスを取得したときの状態 <li> :nth-child(): 要素の兄弟要素を選択 <li> :last-child: 要素を選択します。兄弟要素の最後の要素です。

button:hover {
  background-color: red;
}

input:focus {
  outline: none;
}

ul li:nth-child(2) {
  color: blue;
}

div:last-child {
  font-size: 16px;
}

<p>この例では、マウスが &lt 上にあるときの状態の背景色を設定します。 ;button> 要素。 <input>要素にマウス フォーカスが置かれると、境界線が削除されます。各 <ul>リストの 2 番目の <li> 要素のテキストの色を青にしました。最後の <div> 要素では、フォント サイズを 16px に設定します。

<p>概要

<p>CSS セレクターには多くの種類があり、さまざまなニーズやシナリオに応じてセレクターを使用できます。これらのセレクターの使用をマスターすれば、CSS プログラミングの効率を大幅に向上させることができ、同時にコードをより簡潔で読みやすく、保守しやすくすることができます。

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