CSS についてどのくらい知っていますか (5) --selector_html/css_WEB-ITnose

1. はじめに

今回から連載の第二弾に入ります??cssとhtmlの組み合わせ??端的に言うとセレクターです。

スタイルはCSSで定義されていますが、これらのスタイルを対応するHTMLノードに設定するにはどうすればよいですか？セレクターを通過する必要があります。 CSS によってどの DOM ノードが選択されているかをブラウザーに知らせると、ブラウザーは対応するスタイルをビューに素直にレンダリングします。

CSS がどのようにページをレンダリングできるかについては、このシリーズの第 3 部です。

最初の部分では CSS スタイルの読み込みとカスケードについて説明し、2 番目の部分ではセレクターとセレクター レベルについて説明し、3 番目の部分では提示されるさまざまなスタイル (背景、フォント、位置、フローティングなど) について説明します。このようなアイデアは、CSS を使用してブラウザのプロセスを形式化するものでもあり、最も効果的な学習アイデアです。 (セクション 2 で説明しました。ここでもう一度おさらいしてください)

2. セレクター

CSS セレクターに関して言えば、多くの種類があることは誰もが知っていますが、実際にそれらを指で数えたい場合は、何分かかるかを数える必要があるかもしれません。実際、非常に多くのセレクターは 2 つのカテゴリに分類できます:

1. タグ セレクター (* は特殊なケース)。コンテキスト内の単一のタグまたは複数のタグにすることができます。特別な属性);
2.1. ラベル セレクター

2.1.1 ユニバーサル セレクション*

ユニバーサル セレクター* 最も一般的に使用されるものは *{margin:0; -箱;}。 mragin:0 前のセクションで述べたように、box-sizing: border-box については、ボックス モデルで後ほど詳しく説明します。

例えば、bootstrap3 のスタイルを検出すると、* セレクターが使用されていることもわかります:

2.1.2 単一ラベル

単一ラベル セレクターは、CSS の最も基本的な知識です。このセクションのブラウザのデフォルト スタイルでは、単一タブの選択があらゆる場所で使用されます。ここでは詳細は説明しませんが、CSS の基礎が弱い友人は、最初に追加コースを受講することができます。

2.1.3 マルチラベル

マルチラベル セレクターは、一般に HTML コンテキストに関連しており、次の集中分類があります

div p{…}

Select などの祖先のすべての子孫ノードを選択します。親要素 div > p{…} などのすべての直接ノード
1. 要素の隣の兄弟ノードを選択 (li + li{…} など)
要素のすべての兄弟ノードを選択 (span ~ a など) {…}
上記のさまざまな状況を組み合わせて適用する (組み合わせはあまり複雑にしないでください。コーディングでは読みやすさを最優先します)
5. 以下に示すように、典型的なアプリケーションをリストします。上の図の効果は同等である必要があります。共通、メニュー間に下線が付いています。私の以前の実装は、各 li に border-bottom を追加し、最後の li の border-bottom を削除するというものでした。

実はそんな面倒なことをする必要はなく、以下のスタイル設定で解決できます:

ちょっと面白いですよね。

2.2. 属性セレクター

2.2.1 特殊 1: ID セレクター

基本的な知識なので、詳しく説明する必要はありません。

多くの CSS チュートリアルによると、ID セレクターと属性セレクターは 2 つの異なるカテゴリですが、なぜ ID セレクターを属性セレクターの下に配置する必要があるのでしょうか。 css セレクターは html ノードの特性に基づいて設定されるため、id も属性ですが、各 html ノードの id を繰り返すことはできない特別な属性です。

これは特別であり、一般的に使用されるため、ID セレクターには別個の「#」が与えられます。これは本質的に属性セレクターです。次の 2 行のコードの実行結果はまったく同じです:

2.2.2 特殊 2: クラス セレクター

基本的な知識なので、詳細を説明する必要はありません。

クラスも特別な属性です。属性セレクターの下に配置される理由は、上記の ID と同じです。

2.2.3 属性セレクター

属性セレクターには 2 つのケースがあります:

属性名のみで選択: img[title]{… }

属性名と属性値で選択: input[type=' text']{…}

これら 2 つは比較的基本的なものですが、ここでも詳細は説明しません。理解できない人は、基本的なチュートリアルに進んでレッスンを補うことができます。

3. 疑似クラスと疑似要素

いくつかのセレクター タイプが上で説明されていますが、疑似クラスと疑似要素はどのセレクターにも使用できます。

1. 3.1. 疑似クラス
2. 疑似クラスは、UI 疑似クラスと構造化疑似クラスに分類されます。

3.1.1 UI 疑似クラス

UI 疑似クラスは比較的単純でよく使用されます。以下に数行のコードを記述するだけなので、詳細は説明しません。

3.1.2 構造化疑似クラス (IE の下位バージョンは動作しません)

まず質問させてください: 図に示すように、背景色を一定間隔で表示するテーブルを実装する方法:

最も簡単な方法は、構造化された疑似クラスを 1 つのスタイル設定だけで実装することです。

構造化された疑似クラスには次の記述オプションがあります。その意味については、文字通り理解できます:

3.2. 疑似要素

疑似要素は非常に重要な概念であることを覚えておいてください。その中でも、:before と :after は非常によく使用されます。

まず、:before と :after が何であるかを見てみましょう。

上の図では、要素の前後にコンテンツを追加できることがわかります。ここでの「コンテンツ」は、以下に示すように Unicode エンコードで記述することもできます:

さらに、コンテンツを追加するだけでなく、以下に示すように実行コンテンツのスタイルをカスタマイズすることもできます。

上記は一般的な理解です 2 つの基本的な使用法を理解した後、2 つの典型的なアプリケーション シナリオを紹介します:

まず、誰もが知っている fontAwesome は、Web 上で最も人気のあるアイコン フォント ライブラリです。これらの小さなアイコンの適用は、以下に示すように、疑似要素によって実現されます:

(fontAwesome を知らなくても問題ありません。CSS フォントについて説明するときに詳しく紹介します)

2つ目はフローティングスタイルを全員でクリア 分かりましたか？これは非常に典型的な疑似要素の適用シナリオです:

(CSS Floating について話すとき、clearfix について具体的に説明します)

4. セレクターの拡張

セレクターは元々 CSS のルールであり、CSS Select を提供するために使用されます。 htmlノード。しかし、賢い人間は今でもセレクターを通じて他の分野で素晴らしい作品を生み出しています。

jQuery

jQuery が普及し普及している根本的な理由は、その「クエリ」、つまり CSS セレクターに基づく「クエリ」です。現在のブラウザは querySelectAll() メソッドをサポートしています。実際、これは W3C によって「盗用」された jQuery の設計です。

すべての Web フロントエンド担当者は jQuery に精通していると思います。ここをクリックしてください。

zen-Coding

JQueryはCSSセレクター式を通して既存のHTML構造から式にマッチするDOMグループを選択できますが、zen-codingはその逆?? CSSセレクター式を利用してHTMLノードを作成することができます。私はこれらの人々の創造性を賞賛しなければなりません。

zen-codingを使ったことがない方は、今後使うかどうかに関わらず、ぜひ試してみることをお勧めします！

5. まとめ

このセクションでは CSS セレクターの知識を要約し、セレクターにはいくつかの種類があることを理解します。ただし、型が多すぎることが必ずしも良いとは限りません。次のセクションでは、型が多すぎることによって引き起こされる問題とその解決策について説明します。

------------------------------------------------ -------------------------------------------------- -----------

私のチュートリアルへようこそ:

「デザインからパターンまで」

「

JavaScript プロトタイプとクロージャ シリーズの深い理解」「Microsoft petshop4.0 ソース コード解釈ビデオ」 ""json2 .js ソース コード解釈ビデオ》 私のオープンソース プロジェクトのフォローも歓迎します??wangEditor、シンプルで使いやすい Web リッチ テキスト エディター

---------- -------- -------------------------------------- -------- --------------------------------------