CSSセレクターの詳細

CSS3 基本セレクター

問題をわかりやすく説明するには、まず次のように単純な DOM 構造を作成します。

<div> 
    <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
   </ul> 
</div>

1. ワイルドカード セレクター (＊)
ワイルドカード セレクターはすべての要素を選択するために使用されます。特定の要素の下にあるすべての要素を選択します。例:

コードは次のとおりです:
、もう 1 つは、特定の要素の下にあるすべての要素を選択することです:

コードは次のとおりです:

.demo * {border:1px Solid blue;}

2 . 要素セレクター(E)
要素セレクターはcss セレクターの中で最も一般的で基本的なセレクターです。要素セレクターは、実際には、html、body、p、div などのドキュメントの要素です。たとえば、デモでは、要素には div、ul、li などが含まれます。

コードは次のとおりです:

li {background-color: grey;color: orange;}

3. クラス セレクター (.className)

クラス セレクターは、クラス セレクターから独立した方法でスタイルを指定します。 document 要素。クラス セレクターを使用する前に、HTML 要素でクラス名を定義する必要があります。つまり、クラスを選択できるように、クラス名が HTML タグに存在することを確認する必要があります。

2
"active, important, items" では、クラス セレクターが正常に動作し、そのスタイルをより適切に関連付けられるように、li にクラス名を追加します。要素を含むクラスセレクター。

. important {font-weight: bulled; color: yellow;}
上記のコードは、重要なクラス名を持つ要素に「font-weight, color: yellow」スタイルを追加することを意味します。上で見たように、 li 要素には同時に 2 つ以上のクラス名があり、それらはスペースで区切られています。その後、次のようにセレクターを複数のクラスを使用して接続することもできます。 :

コードは次のとおりです:

. important {font-weight: 太字;}

.active {color: green;background: lime;}

.items {color: #fff;background: #000;上記のコードに示すように、「. important.items」セレクターは、両方の「」を含む要素のみを選択します。 important" と "items" "2 つのクラスは機能します。すべてのブラウザーはクラス セレクターをサポートしていますが、マルチクラス セレクター (.className1.className2) は IE6 ではサポートされていません。

5. 子孫セレクター (EF)

子孫セレクターは、特定の要素の子孫要素を選択することです (例: E F)。前の E は祖先要素であり、F は子孫要素は、E 要素のすべての子孫 F 要素が選択されていることを意味します。スペースで区切る必要があることに注意してください。ここで、F が E 要素の子要素であっても孫要素であっても、あるいはより深い関係であっても、F が E 内にどのレベルの関係を持っているかに関係なく、F が選択されます:

.demo。 li { color: blue;}

上記は、div.demo 内のすべての li 要素が選択されていることを意味します

6. 子要素セレクター (E>F)

子要素セレクターは、特定の子要素のみを選択できます。このうち、E が親要素、F が子要素であることは、E 要素以下の子要素 ​​F がすべて選択されていることを意味します。これは、F が E の子孫要素である子孫セレクター (EF) や、F が E の子要素にすぎない子要素セレクター E > F とは異なります。

ul > li {background: green;color: yellow;}

上記のコードは、ul の下のすべてのサブ要素 li が選択されていることを示します。例:

IE6 は子要素セレクターをサポートしません。

7. 隣接する兄弟要素セレクター (E + F)

隣接する兄弟要素セレクターは、別の要素の直後の要素を選択でき、それらは同じ親要素、つまり EF を持ちます。2 つの要素は同じ親要素を持ちます。 、F 要素は E 要素の後ろに隣接しているため、隣接する兄弟要素セレクターを使用して F 要素を選択できます。

コードは次のとおりです:

li + li {background: green;color: yellow; border: 1px Solid #ccc;}

上記のコードは、li の隣接する要素 li を選択することを意味します。ここに合計10個のliがある場合、上記のコードは2番目のliから10番目のliまでの合計9個を選択します

IE6はこのセレクター

8をサポートしていません ユニバーサル兄弟セレクター(E～F)

。 selector は CSS3 です。 新しいセレクターは、要素の後ろにあるすべての兄弟要素を選択します。これらは、隣接する兄弟要素にも似ており、同じ親要素内にある必要があります。同じ親要素内で、F 要素が E 要素の後にある場合、E ~ F セレクターはすべての E 要素の後の F 要素を選択します。たとえば、次のコード:

コードは次のとおりです:

.active ~ li {background: green;color: yellow; border: 1px sold #ccc;}

上記のコードが意味するのは、li.active 要素の後ろにあるすべての兄弟要素 li が選択されるということです

9.グループ セレクター (selector1、selector2、...、selectorN)

グループ セレクターは、同じスタイルの要素をグループ化します。上記のように、各セレクターはカンマ「,」で区切られます。 selector1、selector2、...、selectorN が表示されます。このカンマは、ルールに複数の異なるセレクターが含まれていることをブラウザに伝えます。このカンマを省略すると、表現される意味がまったく異なります。これは誰もが知っていることです。使用する場合は注意してください。

CSS セレクターの詳細な紹介と関連記事については、PHP 中国語 Web サイトに注目してください。