简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CSS selectors_html/css_WEB-ITnose の使い方まとめ

WBOY
リリース： 2016-06-24 11:45:05
オリジナル
919 人が閲覧しました

1. 要素セレクター

定義: ある要素から別の要素にスタイルを切り替えることができます。

例: HTML のスタイルを設定する場合、セレクターは通常、p、h1、em、a などの HTML 要素、または HTML 自体になります。 

html {color:black;}h1 {color:blue;}h2 {color:silver;}
ログイン後にコピー

2. タイプ セレクター

定義: タイプ セレクターは、ドキュメント言語要素タイプの名前と一致し、ドキュメント ツリー内のその要素タイプのすべてのインスタンスと一致します。

例: 次のルールは、ドキュメント ツリー内のすべての h1 要素と一致します。 

h1 {font-family: sans-serif;}
ログイン後にコピー

3. ワイルドカード セレクター

定義: ワイルドカード セレクター。アスタリスク (*) として表示されます。このセレクターは、ワイルドカードと同様に、任意の要素と一致します。

例: 次のルールでは、ドキュメント内のすべての要素を赤色にすることができます。 

* {color:red;}
ログイン後にコピー

4. ID セレクター

定義: クラス セレクターに似ていますが、先頭に # 記号 (チェッカーボード番号またはポンド記号とも呼ばれる) が必要です。

例: 

*#intro {font-weight:bold;}
ログイン後にコピー
<p id="intro">This is a paragraph of introduction.</p>
ログイン後にコピー

5. セレクター

が含まれます。

定義: ドキュメント ツリー内の要素の子孫要素を選択するために使用されます。

インスタンス

<body><h1>Heading <em>here</em></h1><p>Lorem ipsum dolor <em>sit</em> amet.</p></body>
ログイン後にコピー

6. 疑似クラスセレクター

定義: ドキュメントツリーにないいくつかのエントリをフォーマットできるようにします。

例:

擬似クラス セレクターを使用して、ハイパーリンク 要素の 4 つの異なる状態をさまざまな方法でフォーマットします。

◆a:link 未訪問のリンクのセレクター。 

a:link{color:red;}
ログイン後にコピー

◆a:visited 訪問済みリンクに使用されるセレクター。 

a:visite{color:blue}
ログイン後にコピー

◆a:hover マウスカーソルが置かれているリンクに使用されるセレクター。 

a:hover{color:yellow}
ログイン後にコピー

◆a:active フォーカスを取得する (例: クリックされた) リンクに使用されるセレクター。 

a:active{color:pink}
ログイン後にコピー

7. 疑似要素セレクター

定義: ドキュメント ツリーにない一部の情報をフォーマットできるようにします。

ブラウザでサポートされているタイプは、first-line と first-letter の 2 つです。

first-line は要素の最初の行に使用されます。

例:

p:first-line{font-weight:bolder}

first-letter は要素の最初の文字に使用されます。

例:

p:first-letter{font-size:20px;}

概要:

基本セレクター:

1. 要素 (ラベル) セレクター: ラベル名に直接作用します。

2. クラス セレクター: ラベルにはクラス属性が必要であり、クラス属性値の前にドットを追加する必要があります。

3.id セレクター: ラベルには id 属性が必要で、id 属性値の前に # を追加する必要があります。

4. 属性セレクター: [] を使用してタグの属性/属性 = "値" を囲みます。

5. ワイルドカード セレクター: *{...} の形式。

複合セレクター:

1. 交差セレクター: 隣接して記述された 2 つ以上のセレクターを使用します (div.class{...})。

2. ユニオンセレクター: 2 つ以上のセレクターをカンマで区切って記述します。選択されたすべてのタグが適用されます (div、h1、.class、#div1{...})。

3. 背景セレクター: 2 つ以上のセレクターを一緒に記述し、最初のセレクターのすべての子孫セレクターが適用されます (div .class{...})。

関連ラベル：
CSS选择器使用方法小结
ソース：php.cn
前の記事：メディア クエリの適用と css3_html/css_WEB-ITnose の変更 次の記事：LCD 画面表示効果を作成する純粋な CSS_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JS を使用して再生品質を制御する Javascript を使用してビデオの再生品質を制御する方法はありますか?より正確に言うと、JavaScriptを使用してビデオの品質を選択したいと考えています。 Chrome ...
から 2024-04-04 00:21:55
0
1
384
HTML コンテナのサイズを動的に変更するにはどうすればよいですか? ウィンドウに合わせてサイズを動的に変更する背景であるコンテナ div があります。そのコンテナ内に画像 div があり、背景コンテナを使用してそのサイズを変更したいと考えています。...
から 2024-04-03 20:38:38
0
1
272
div を使用せずに複数のスパンクラスを同じ行に置くことは可能ですか? 各テキストに異なる色を付けたかったので、複数のスパンクラスを使用して CSS で色を設定しました。また、テキストに改行を入れたかったので、div を使用しました。このフィドルは私が...
から 2024-04-03 11:17:18
0
1
360
CSSクラスセレクターのwidthプロパティを確認するにはどうすればよいですか?例は .label{} です。 以下は、.label の幅 270 を選択した CSS コードに関する私のコメントです。 ブラウザの開発者ツールを使用して .label 要素を検査すると、実際の幅は 270 ピク...
から 2024-04-01 17:45:11
0
1
338
HTML <pre><code> タグをラップせずにオーバーフローしようとすると、フレックススペースが壊れる GitHub などで見られるようなスタイル付きのコード ブロックを作成するために、CSS をプリコード セレクターに適用します。レイアウトに Flexbox を使用しており、「bo...
から 2024-04-01 12:22:06
0
1
296
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！