ホームページ ウェブフロントエンド CSSチュートリアル CSS3のセレクターの構文は何ですか

CSS3のセレクターの構文は何ですか

Nov 30, 2017 pm 12:00 PM
css3 セレクタ

今日は CSS3 でよく使われるセレクター構文を紹介します。構文は大きく 基本セレクター構文、階層セレクター構文、動的疑似クラスセレクター構文の 3 種類に分けられます。以下に詳しく説明させていただきます。

1. 基本セレクター構文

(1)* ワイルドカードセレクター ドキュメント内のすべての HTML 要素を選択します

(2)E 要素セレクター 指定されたタイプの HTML 要素を選択します

#id ID セレクター 指定された Any タイプを選択しますID 属性値 "id" を持つ要素の要素

.class クラスセレクター 指定されたクラス属性値 "class" を持つ任意の型の複数の要素を選択

selector1, selectorN Group Selector 各セレクターを一致させる要素セット

2,階層セレクター構文

(1)E F 子孫セレクター (セレクターを含む) 一致する F 要素を選択し、一致する F 要素は一致する E 要素に含まれます

( 2)E>F サブセレクターは一致する F を選択します要素に一致し、一致する F 要素が E 要素の子要素と一致する

(3)E+F 隣接兄弟セレクター 一致する F 要素を選択し、一致する F 要素は一致する E 要素の直後に位置します

( 4)E~F ユニバーサルセレクター 一致するF要素と一致するE要素の後にあるすべての一致するF要素を選択します

3、動的擬似クラスセレクター構文

(1)E:linkリンク擬似クラス セレクターは一致する E 要素を選択します。一致する要素はハイパーリンクとして定義されており、アクセスされていません。リンクの説明ポイントで一般的に使用されます

(2)E:visited リンク擬似クラス セレクターは、一致する E 要素を選択し、一致する要素はハイパーリンクで定義され、訪問済みです。リンク描画ポイントでよく使用されます

(3)E:active ユーザー動作セレクターは、一致する E 要素を選択し、一致する要素がアクティブになります。リンク ストロークとボタンでよく使用されます

(4)E:hover ユーザー動作セレクター 一致する E 要素を選択し、ユーザーのマウスは要素 E 上に留まります。 IE6 以下のブラウザは、a:hover

(5)E:focus のみをサポートします。 ユーザー動作セレクター 一致する E 要素を選択し、一致する要素がフォーカスを取得します


上記の紹介を読んだ後、あなたはこの方法をマスターしたと思います。などなど、とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。

関連記事:

H5 で花火のパーティクルエフェクトを作成する方法

div 幅を適応させるためのチュートリアル

Web ページで h タグを使用した開発経験

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

CSS3でレースボーダーを実装する方法 CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

CSSのIDセレクターの識別子は何ですか CSSのIDセレクターの識別子は何ですか Sep 22, 2022 pm 03:57 PM

CSS では、ID セレクターの識別子は「#」です。特定の ID 属性値でマークされた HTML 要素に特定のスタイルを指定できます。構文構造は「#ID 値 {属性: 属性値;}」です。 ID 属性は一意であり、ページ全体で反復できません。ID 属性値は数字で始まってはなりません。数字で始まる ID は Mozilla/Firefox ブラウザでは機能しません。

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。 :nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。 Nov 20, 2023 am 11:20 AM

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具体的なコード例は次のとおりです。 HTML コード: <divid="container" ><divclass="item"&gt ;最初の子要素</div><divclass="item"&

JavaScript セレクターが失敗した場合の対処方法 JavaScript セレクターが失敗した場合の対処方法 Feb 10, 2023 am 10:15 AM

コードが標準化されていないため、JavaScript セレクターが失敗します。解決策は、 1. インポートされた JS コードを削除すると、ID セレクター方式が有効になります。 2. 「jquery.js」を導入する前に、指定された JS コードを導入するだけです。

新しい CSS 機能を学習します: 方向クリッピング オーバーフロー:クリップ 新しい CSS 機能を学習します: 方向クリッピング オーバーフロー:クリップ Oct 11, 2022 pm 07:12 PM

この記事では、Chrome 90からオーバーフローに追加された新機能「overflow:clip」を紹介しますので、これを利用すると簡単にオーバーフローの方向を制御することができます。

CSS のセレクターにはハイパーテキスト タグ セレクターが含まれますか? CSS のセレクターにはハイパーテキスト タグ セレクターが含まれますか? Sep 01, 2022 pm 05:25 PM

含まれていない。 CSS セレクターには次のものがあります: 1. HTML ページの要素名を通じて特定の HTML 要素を見つけるタグ セレクター; 2. HTML 要素の class 属性の値を通じて特定の HTML 要素を見つけるクラス セレクター; 3. ID セレクターHTML 要素の id 属性の値を通じて特定の HTML 要素を検索します。 4. ワイルドカード セレクター「*」は、カスタム要素を含むすべてのタイプのタグ要素を参照できます。 5. 属性セレクターは、HTML 要素の既存の属性名を使用します。特定の HTML 要素を見つけるための HTML 要素または属性値。

is および where セレクターの詳細な分析: CSS プログラミング レベルの向上 is および where セレクターの詳細な分析: CSS プログラミング レベルの向上 Sep 08, 2023 pm 08:22 PM

is および where セレクターの詳細な分析: CSS プログラミングのレベルの向上 はじめに: CSS プログラミングのプロセスにおいて、セレクターは不可欠な要素です。これにより、特定の基準に基づいて HTML ドキュメント内の要素を選択し、スタイルを設定することができます。この記事では、一般的に使用される 2 つのセレクター、つまり is セレクターと where セレクターについて詳しく説明します。その動作原理と使用シナリオを理解することで、CSS プログラミングのレベルを大幅に向上させることができます。 1. is selector is selector は非常に強力な選択肢です

初心者から熟練者まで: is セレクターと where セレクターの使用スキルをマスターする 初心者から熟練者まで: is セレクターと where セレクターの使用スキルをマスターする Sep 08, 2023 am 09:15 AM

初心者から上級者まで: is および where セレクターの使用スキルをマスターする はじめに: データの処理と分析のプロセスにおいて、セレクターは非常に重要なツールです。セレクターを使用すると、特定の条件に従ってデータセットから必要なデータを抽出できます。この記事では、読者がこれら 2 つのセレクターの強力な機能をすぐに習得できるように、is および where セレクターの使用スキルを紹介します。 1. is セレクターの使用 is セレクターは、与えられた条件に基づいてデータセットを選択できるようにする基本的なセレクターです。

See all articles