、CSSを学ぶ人にとっては参考になると便利です。すぐに完成し、後で公開されます(笑顔)。 このセクションの内容は、前のセクションの内容に続いて引き続き改善されます。まず、CSS セレクター (主に IE) のブラウザーのサポートが追加されます。たとえば、最も一般的に使用される s1、s2 などです。 , sN グループ セレクターは IE7 でのみサポートされており、IE7 はサブ要素セレクターや属性セレクターなど、予想外の多くのセレクターもサポートしていることがわかります。
後で、セレクターを使用するときに発生するいくつかの問題と解決策も追加します。最後に、ブラウザーがセレクターを読み取る方法と、セレクターを使用して高効率を達成する方法を理解します。
ブラウザのサポート
と比較して、IE7には、グループ セレクター、隣接セレクター、兄弟セレクター、属性セレクターなど、利用できるセレクターがさらに多くあることはご存知でしたか。 次のセレクターは
IE6をサポートせず、IE7 以降のブラウザーのみをサポートします 基本セレクター
| 説明 | バージョン | |
|---|---|---|
| グループ セレクター、すべての s1 要素または s2 要素に同時に一致します | 2.1 | |
| 隣接要素セレクター、E 要素の直後にあるすべての兄弟 F タグに一致します | 2.1 | |
| E タグに続く兄弟 F タグと一致します | 3 | |
| セレクター | 説明 |
| E 要素が att 属性に一致します | 2.1 | |
|---|---|---|
| match att 属性を持ち、その属性値が val に等しい E 要素 | 2.1 | |
| att 属性と属性値に一致する単語リストには、val | 2.1 | |
| に等しい E 要素があります。att 属性と一致し、属性値が E 要素ですval で始まる属性値が val で終わる文字列である E 要素 | 3 | |
| att 属性が文字列で属性値がval | 3 | |
| E 要素を含む文字列で、att 属性と一致し、その属性値は val で始まりコネクタ "-" で区切られた文字列です | 2.1 | |
| ブラウザでは、単一のチェックボックスのチェックは属性セレクターではサポートされていません。この部分については、以下の FAQ で詳しく説明されています。 | 擬似クラスセレクター | |
| Description | Version |
マウスオーバー時に要素のスタイルを設定します 2.1
| 一致親要素の最初の子要素 E | 2.1 | |
|---|---|---|
| 擬似要素セレクター | Selector | |
| Version | E:ファースト-letter |
2.1
| 要素の最初の行を選択 | 2.1 | 平凡なIE8ブラウザ |
|---|---|---|
| 次のセレクターは | IE6、IE7 | をサポートせず、IE8 | 以降のブラウザーのみをサポートします
| セレクター | 説明 |
E:フォーカス
を設定します入力フォーカスになったときのオブジェクトのスタイル
擬似要素セレクター| Description | Version | |
|---|---|---|
| 要素の前にコンテンツを挿入、Match 」 | 2.1 |
| セレクター | 説明 | バージョン |
|---|---|---|
| E:チェックしました | ユーザーインターフェース上の選択状態の要素 E と一致します | 3 |
| E:enabled | ユーザーインターフェース上の使用可能な状態の要素 E と一致します | 3 |
| E:disabled | ユーザーインターフェイス上で利用可能な状態の要素 E 無効な要素 E | 3 |
| E:root | は、ドキュメントのルート要素と一致します。HTML ドキュメントの場合、HTML 要素 | 3 |
| E:last-child | 親要素の最後と一致します A 子要素 E | 3 |
| E:nth-last-child(n) | n 番目の子要素 E | 3 |
| E:nth-of-type(n) | 同じ型の n 番目の兄弟要素 E と一致します | 3 |
| E:nth-last-of-type(n) | 最後から 2 番目の n 番目の兄弟要素 E と一致します同じ型の | 3 |
| E:first-of-type | 同じ型の最初の兄弟要素 E と一致します | 3 |
| E:last-of-type | 最初の兄弟要素と一致します同じ型の要素 E 最後の兄弟要素 E | 3 |
| E:only-child | は唯一の子要素 E | 3 |
| E:only-of-type | と一致しますtype 唯一の兄弟要素 E | 3 |
| E:empty | 要素 E | 3 |
| E:not(s) | s セレクターを含まない要素と一致 | 3 |
| E:target | ドキュメント内の特定の「ID」をクリックしたときの効果を一致させる | 3 |
| セレクター | 説明 | バージョン |
|---|---|---|
| E: :first-letter | テキストブロックの最初の文字を選択 | 3 |
| E::first-line | 要素の最初の行を選択 | 3 |
| E::before | 挿入要素の前にコンテンツを挿入するには、「content」と一緒に使用します | 3 |
| E::after | 要素の後にコンテンツを挿入するには、「content」と一緒に使用します | 3 |
| E::selection | Setオブジェクトが選択されているときのスタイル | 3 |
IE6 ～ 8 に CSS3 疑似クラスと属性セレクターをサポートさせる方法を考えたことがあるかもしれません。これを支援するために JavaScript ツールを使用します。次のように、selectivizr.js をページに導入するだけです:
ただし、使用する際にはいくつかの注意事項があります:
jQuery などの JavaScript ライブラリを参照する必要があります
は タグによって導入されたスタイルのみを解析できます。スタイルが
