ホームページ > 記事 > ウェブフロントエンド > CSS selectors_html/css_WEB-ITnose の使い方まとめ
CSS selectors_html/css_WEB-ITnose の使い方まとめ
- WBOYオリジナル
- 2016-06-24 11:45:05921ブラウズ
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. 疑似クラスセレクター
定義: ドキュメントツリーにないいくつかのエントリをフォーマットできるようにします。
例:
擬似クラス セレクターを使用して、ハイパーリンク 3499910bf9dac5ae3c52d5ede7383485 要素の 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{...})。