以下は、Alexis Goldstein、Louis Lazaris、Estelle Weylが共著した本「HTML5＆CSS3 for the Real World、第2版」から抜粋しています。この本は世界中の店舗で入手できます。また、ここで電子書籍バージョンを購入することもできます。

コアポイント

• CSS3セレクターは、Webページ上の要素の正確な位置決めを可能にし、以前のCSSバージョンの機(jī)能を拡張します。リレーショナルセレクターと屬性セレクターは、CSS3の重要な機(jī)能です。
• 関係セレクターは、タグ內(nèi)の関係に基づいて要素を見つけます。これらには、子孫コンビナー（E F）、サブコンビネーター（E＆GT; F）、隣接する兄弟セレクターまたは次の兄弟セレクター（E F）、および普遍的な兄弟セレクターまたはその後の兄弟セレクター（E?F）が含まれます。
CSS3の屬性セレクターは、要素の屬性に基づいて一致することを可能にし、CSS3はパターンマッチングを許可することによりCSS2の屬性セレクターを拡張します。これらには、e [attr]、e [attr = val]、e [attr | = val]、e [attr? = val]、e [attr^= val]、e [attr $ = val]、およびe [attr * = val]。
すべての最新のブラウザは、IE9以降を含むCSS3セレクターをサポートしています。これらのセレクターを使用すると、Web設(shè)計(jì)と開発の効率と有効性が大幅に向上する可能性があります。

css3 selector

CSSセレクターはCSSの中核です。ページ上に要素を見つけるセレクターがない場合、要素のCSS屬性を変更する唯一の方法は、要素のスタイル屬性を使用して、不器用で維持が難しいスタイルのインラインを宣言することです。したがって、セレクターを使用します。最初に、CSSは、タイプ、クラス、および/またはIDごとに一致する要素を許可します。これには、クラスとID屬性をタグに追加して、同じタイプのフックと區(qū)別要素を作成する必要があります。 CSS2.1は、擬似要素、擬似クラス、および組み合わせを追加します。 CSS3を使用すると、さまざまなセレクターを使用して、ページ上のほぼすべての要素を見つけることができます。

以下の説明では、以前のCSSバージョンに提供されたセレクターを含めます。 CSS3セレクターを使用できる一方で、CSS3よりも早くセレクターもCSSセレクターレベル3仕様の一部であり、CSSセレクターレベル3がそれらを拡張するため、まだサポートされているためです。かなり長い間存在していたセレクターでさえ、古い仕様にはあまり知られていない隠された寶石があるため、ここでレビューする価値があります。 IE9以降を含むすべての最新のブラウザは、すべてのCSS3セレクターをサポートすることに注意してください。

関係セレクター

関係セレクターは、タグ內(nèi)の関係に基づいて要素を見つけます。これらはすべて、IE7から、および他のすべての主要なブラウザでサポートされています：

子孫コンビネーター（e f）

あなたは間違いなくこれに精通している必要があります。子孫セレクターは、要素Eの子孫である要素F（子要素、孫の要素、great孫要素など）を見つけます。たとえば、Ol Liは、順序付けられたリストにあるLI要素を見つけます。これには、OLのULにネストされたLi要素が含まれますが、これはあなたが望むものではないかもしれません。

subcombinator（e＆gt; f）

このセレクターは、要素eの

要素Eの直接的な子要素として、任意の要素fを一致させます - さらにネストされた要素は無視されます。上記の例を続けると、OL＆GT;

隣人の兄弟セレクターまたは次の兄弟セレクター（e f）

これは、Eと同じ親要素を共有する要素Fと一致し、タグ內(nèi)の

のすぐ後ろにある任意の要素と一致します。たとえば、Li Liは、最初のLI要素を除き、特定の容器內(nèi)のすべてのLI要素を見つけます。

普遍的な兄弟セレクターまたはその後の兄弟セレクター（e?f）

これは少し難しいです。これは、eと同じ親要素を共有し、タグにその背後にある任意の要素Fと一致します。したがって、H1?H2は、H2がすべて同じ直接の親要素を共有している限り、H2が他の要素にネストされていない限り、H1の後にあるH2と一致します。

簡単な例を見てみましょう：

H1とH2は両方ともヘッダーまたは直接の子孫の子供であるため、

セレクター文字列H1?H2は最初のH2と一致します。コードスニペットに表示される次のH2は、その親要素がヘッダーではなく記事であるため、一致しません。ただし、ヘッダー?H2と一致します。同様に、H2?Pは最後の段落とのみ一致します。最初の段落はH2の前であるため、親要素の記事と共有します。

<header>
  <h1>Main title</h1>
  <h2>This subtitle is matched</h2>
</header>
<article>
  <p>blah, blah, blah …</p>
  <h2>This is not matched by h1 ~ h2, but is by header ~ h2</h2>
  <p>blah, blah, blah …</p>
</article>

注：なぜ「親」セレクターがいないのですか？

これまでのところ、「父」または「祖先」セレクターも「兄弟兄弟」セレクターもいないことに気付くでしょう。ブラウザのパフォーマンスは、スタイルを適用するかどうかを決定する前に、ネストされた要素セットにDOMツリーを後方に移動(dòng)するか、再帰的にしなければなりません。

jQueryには、祖先セレクターとして（）が含まれます。このセレクターはCSSセレクターレベル4で検討されていますが、ブラウザには実裝されていません。実裝された場合、e：has（f）を使用してfを子孫として見つけます。 ）兄弟Fの直前にEを見つける。

HTML5ヘラルドのスタイルシートを閲覧すると、これらのセレクターを多くの場所で使用していることがわかります。たとえば、サイトの全體的なレイアウトを決定するとき、3つの列のdivを左に浮かせたいと思います。このスタイルをその內(nèi)部にネストされた他のdivに適用することを避けるために、サブセレクターを使用します。

次のいくつかの章でサイトに新しいスタイルを追加すると、これらのセレクタータイプの多くが表示されます。

main > div {
  float: left;
  overflow: hidden;
}

屬性セレクター

CSS2はいくつかのプロパティセレクターを?qū)毪筏蓼?。これらは、要素の屬性に基づいて一致することを可能にします?CSS3はこれらのプロパティセレクターを拡張して、パターンマッチングに基づいて何らかの位置を確保します。 CSSセレクターレベル4がさらに追加されました：

e [attr]屬性の値に関係なく、任意の要素Eと屬性屬性を一致させます。第4章では、必要な入力をスタイリングしました。

e [attr = val]は、任意の要素eと屬性屬性と一致し、その値はvalです。新しいものではありませんが、たとえばフォーム入力タイプを見つけると便利です。[タイプ=チェックボックス]を使用してチェックボックスを見つけます。

e [attr | = val]屬性屬性がVALの値を持っているか、Val-で始まる要素と一致します。これは、Lang屬性で最も一般的に使用されています。たとえば、p [lang | = "en"]は、英國英語であろうとアメリカ英語であろうと、

または

を使用して、英語で定義された段落と一致します。

e [attr? = val]は、屬性屬性が完全な単語val（スペースで囲まれている）を含む要素と一致します。たとえば、.info [title?= more]は任意の要素をクラス情報(bào)と一致させ、タイトル屬性には「詳細(xì)をクリックする」などの「more」という単語が含まれます。

e [attr^= val]屬性屬性が値valで始まる要素と一致します。つまり、Valはプロパティ値の開始と一致します。

e [attr $ = val]屬性屬性がで終了する要素と一致します。言い換えれば、VALはプロパティ値の終わりと一致します。

e [attr= val]は、屬性屬性が任意の位置でVALと一致する要素と一致します。それはe [attr? = val]に似ていますが、valが単語の一部になる可能性があることを除いて。以前と同じ例を使用して、.fakelink [title = info] {}は任意の要素をクラスFakelinkと一致させ、タイトル屬性には「詳細(xì)を參照するにはここをクリック」などの文字列情報(bào)が含まれます。

これらのプロパティセレクターでは、VALの値は、HTMLのケースに敏感な値に対して癥例に敏感です。たとえば、input [class^= "btn"]は、クラス名がケースに敏感であるため、ケースに敏感ですが、入力[type = "checkbox"]は、型値がHTMLでケースインス感受性であるため、ケースに敏感です。

値が英數(shù)字である場合、値は必要ありませんが、いくつかの例外があります?？栅挝淖至?、數(shù)字から始まる弦、2つのハイフン、その他の特別なケースを引用符で囲む必要があります。例外があるため、引用が必要な狀況の引用を常に含める習(xí)慣を身に付けることをお?jiǎng)幛幛筏蓼埂?

CSSセレクターレベル4では、エンドブラケットの前にiを含めることにより、ケース感動(dòng)性を達(dá)成できます。

CSS3のリレーショナルセレクターと屬性セレクターに関するFAQ

CSS3の関係セレクターとプロパティセレクターの違いは何ですか？

CSS3の関係セレクターは、HTMLドキュメントの他の要素との関係に基づいて要素を選択するために使用されます。たとえば、子どもの要素、子孫、近隣の兄弟、普遍的な兄弟セレクターは、すべてのタイプのリレーショナルセレクターです。一方、屬性セレクターは、その屬性または屬性値に基づいて要素を選択するために使用されます。たとえば、プロパティセレクターを使用して、「テキスト」の型屬性を持つすべての入力要素を選択できます。

CSS3でサブコンビネーターを使用する方法は？

CSS3のサブコンビネーターは、「＆gt;」で表されます。特定の要素の直接の子要素を選択するために使用されます。たとえば、クラス「親」を持つ親要素のすべての直接子のdiv要素を選択する場合は、次のCSSを書く必要があります。

.parent > div { /* CSS 屬性在此處 */ }

CSS3で複數(shù)のプロパティセレクターを使用できますか？

はい、CSS3で複數(shù)のプロパティセレクターを使用できます。これにより、複數(shù)の屬性條件を満たす要素を選択できます。たとえば、タイプ屬性「テキスト」と名前屬性「ユーザー名」を持つすべての入力要素を選択する場合は、次のCSSを記述する必要があります。

input[type="text"][name="username"] { /* CSS 屬性在此處 */ }

CSS3の隣接する兄弟コンビネーターの目的は何ですか？

CSS3の隣接する兄弟コンバイナーは、「」シンボルで表されます。これは、別の特定の要素のすぐ後ろにある要素を選択するために使用され、2つの要素は同じ親要素を共有します。たとえば、P要素のすぐ後ろにあるDIV要素を選択する場合は、次のCSSを書く必要があります。

p div { /* CSS 屬性在此處 */ }CSS3に特定の屬性値を持つ要素を選択する方法は？

CSS3に特定の屬性値を持つ要素を選択するには、屬性セレクター、屬性名、および平方ブラケットで値を使用します。たとえば、タイプ屬性「テキスト」を持つすべての入力要素を選択する場合は、次のCSSを記述する必要があります。

CSS3の関係セレクターと屬性セレクターを組み合わせることはできますか？ input[type="text"] { /* CSS 屬性在此處 */ }

はい、CSS3の関係セレクターと屬性セレクターを組み合わせることができます。これにより、他の要素やプロパティとの関係に基づいて要素を選択できます。たとえば、入力要素の型屬性が「テキスト」である「フォーム」を持つフォーム要素のすべての直接の子入力要素を選択する場合は、次のCSSを記述する必要があります。

CSS3のユニバーサルブラザーコンビネーターは何ですか？

form.form > input[type="text"] { /* CSS 屬性在此處 */ }

CSS3のユニバーサル兄弟コンバイナーは、「?」シンボルで表されます。 HTMLドキュメントでの注文に関係なく、特定の要素の兄弟要素を選択するために使用されます。たとえば、P要素のすべての兄弟div要素を選択する場合は、次のCSSを書く必要があります。

特定の屬性を持たないCSS3で要素を選択する方法は？

p ~ div { /* CSS 屬性在此處 */ } CSS3に特定の屬性を持たない要素を選択するには、屬性セレクターを使用して：not（）pseudo-classを使用します。たとえば、タイプ屬性が「送信」されていないすべての入力要素を選択する場合は、次のCSSを記述する必要があります。

擬似クラスでCSS3の関係セレクターを使用できますか？

はい、擬似クラスを使用してCSS3の関係セレクターを使用できます。これにより、他の要素や狀態(tài)との関係に基づいて要素を選択できます。たとえば、すべての直接子を選択する場合は、ホバリングされているナビゲーション要素の要素を選択する場合は、次のCSSを書く必要があります。

nav > a:hover { /* CSS 屬性在此處 */ }

特定の値を持つ特定の屬性を含むCSS3の要素を選択する方法は？

CSS3に特定の値を持つ特定の屬性を含む要素を選択するには、正方形のブラケットプロパティセレクター、屬性名と値、および *=演算子を使用します。たとえば、「例」を含むHREF屬性を持つすべてのA要素を選択する場合は、次のCSSを記述する必要があります。

以上がCSS3のリレーショナルおよび屬性セレクターの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。