ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS がセレクターを征服する 1_html/css_WEB-ITnose
CSS がセレクターを征服する 1_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:25:101068ブラウズ
Selectors (セレクター)
--------------CSS の学習については MDN を参照してください。
まず、CSS セレクターはたくさんありますが、一般的には次の 2 つのタイプがあります:
- ラベル セレクター (* は特殊なケース)。単一のラベルまたはコンテキストに応じた複数のラベルにすることができます。
- 属性セレクター (id;およびクラス) これらはすべて属性であり、特別な属性です);
タグ セレクター ~ 単一タグ
は、この単一タグの名前を参照して、8e99a69fbe029cd4e2b854e244eab143 の操作などのスタイル操作を実行できます。この HTML 値のタグ。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body></html>
CSS ファイル内でそのタグを使用して、文字を赤色にするなど、タグ内の属性に対してスタイル操作を実行します。
strong { color: red;}
タグセレクター ~ マルチタブ
公式バージョン
| セレクター | 選択された要素 |
| A E | 要素 A の子孫である任意の要素E (子孫ノードとは、A の子ノード、子ノードの子ノードなどを指します) |
| A > 最初の子要素 E | B + E |
| B ~ E | |
| よくある説明 | |
| div > p{…} などの親要素の直接ノードをすべて選択します | li + li{…} などの要素の隣の兄弟ノードを選択します |
上記の状況を組み合わせたアプリケーション (組み合わせを複雑にしすぎないでください。コーディングは読みやすさを第一に考えてください)
- 以下に示すように、典型的なアプリケーションをリストします
- 上の図の効果はより一般的であるはずで、各メニューの間に下線を引いてください。私の以前の実装は、各 li に border-bottom を追加し、最後の li の border-bottom を削除するというものでした。
- 実際には、それほど面倒なことは必要ありません。次のスタイル設定で解決できます。
- 属性セレクター ~
最初に行うのは、もちろん、class と id の 2 つの強力なプレーヤーです
(クラス セレクター)
要素の class 属性を設定することで、要素のクラス名を指定できます要素。クラス名は開発者自身が指定します。 ドキュメント内の複数の要素が同じクラス名を持つことができます。
スタイルシートを記述する場合、クラスセレクターは英語のピリオド (.) で始まります。
(ID セレクター)
id 属性を設定して要素の ID を指定します。 ID名は開発者が指定します。各 ID はドキュメント内で一意である必要があります。
スタイルシートを記述する場合、IDセレクターは#で始まります。
例を見てみましょう:
ul li+li{ border-top: 1px solid #ccc;}
<p class="key" id="principal">
上記の p タグには class 属性と id 属性の両方があります
CSS の ID セレクター プリンシパルは一意である必要がありますが、クラス セレクターは一意である必要があります。他のタグと併用 タグ内のキーは同じなので、複数のタグを同時に操作できます。
.key { color: green;}#principal { font-weight: bolder;} 例: クラス セレクターと ID セレクターを使用して HTML ファイルを作成する
style1.css を作成する
你也可以将多个选择器组合起来构成更确定的选择器。比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的<p> 元素。除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p id="first"> <strong class="carrot">C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets </p> <p id="second"> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body></html><br />
3. ファイルを保存し、ブラウザを使用して実行します
スタイル内のルールの順序を再編成すると、これらのルールの順序を変更しても最終的な効果に影響しないことがわかります。
クラス セレクター .キャロット および .スピナッチは、タグ セレクター Strong よりも高い優先順位を持ちます。
ID セレクター #first は、クラス セレクターやタグ セレクターよりも優先されます。
- 終わり:
最初の記事でこれらを記録しましょう。疑似クラスと疑似要素については、後で個人的によく理解していないので、最初に勉強してまとめます。
ブログを始めたばかりなので、まだまだリズムに問題があると感じています。漏れがあれば先輩方にアドバイスをいただき謙虚に勉強させていただきますのでよろしくお願いします。