覚えておきたいCSSセレクター30種類_html/css_WEB-ITnose

あなたは `id`、`class`、`descendant` セレクターについて読んで、それらをすべて使用しているかもしれませんが、より柔軟性の高いメソッドを選択するという間違いを犯しています。この記事で説明されているセレクターのほとんどは CSS3 標準に準拠しているため、対応するブラウザーの最新バージョンでのみ有効になることを念頭に置いてください。
1.

より高度なセレクターを確認する前に、よく知られているクリア セレクターをダウンロードすることを知っておく必要があります。アスタリスクは、ページ上のすべての要素を選択します。多くの開発者は、「マージン」と「パディング」をクリアするためにこれを使用します。もちろん練習時に使用することもできますが、本番環境で使用することはお勧めしません。ブラウザに不要なものがたくさん追加されます。

`*` は、要素のすべての子要素を選択するために使用することもできます。

1. CSS コード
3. #container * {
4. border: 1px Solid black

}

`#con コンテナ下のすべての要素` が選択されます。もちろん、可能であれば使用することはお勧めしません。

デモ

互換性

1. IE6+
2. Firefox
3. Chrome

Safari

Opera



2.
CSS コード

#container {

width: 960px ;

margin: auto;

}

ID で要素を見つけるには、セレクターで `#` を使用します。誰もが通常この方法でそれを使用しますが、使用するときは依然として細心の注意が必要です。 自問する必要があります: この要素を見つけるには、この要素に ID を割り当てる必要がありますか?

「id」セレクターは非常に厳密であるため、再利用できません。可能であれば、最初にタグ名、HTML5 の新しい要素、または疑似クラスを使用してみてください。

デモ

互換性

IE6+
Chrome
Safari
Opera

3.

.error {

色: 赤

}

これは「クラス」セレクターです。複数の要素をターゲットにできる点で、`id` セレクターとは異なります。複数の要素をスタイルしたい場合は、「class」を使用できます。特定の要素を変更したい場合は、「id」を使用してその要素を見つけます。

デモ

互換性

IE6+

Firefox

Chrome

Safari Opera

4. CSSコード

1. li a {
2. テキスト装飾: なし
3. }

次によく使用されるのは、`descendant` セレクターです。要素の検索をより具体的にしたい場合は、これを使用できます。たとえば、すべての「a」要素をターゲットにする必要はなく、「li」タグの下にある「a」タグだけをターゲットにする必要がある場合はどうすればよいでしょうか。現時点では、「descendant」セレクターを使用する必要があります。

専門家のヒント: セレクターが `X Y Z A B.error` のように見える場合は、やり方が間違っています。本当に多くの要素を変更する必要があるかどうかを常に思い出してください。
デモ
互換性

IE6+

Firefox

Chrome

Safari

Opera

5.

a { 色: 赤 }

ul { マージン左: 0ページ上のすべてのタグを見つけたい場合は、`id` や 'class' を使用する代わりに、タイプ セレクターを直接使用するのが簡単です。

デモ互換性

2. IE6+
3. Firefox

Safari

Opera



6。

Css代码 

1. a:link {color:red;}  
2. a:visited {color: purple;}  

我们使用`:link`这个伪类来定位所有还没有被访问过的链接。 
另外，我们也使用`:visited`来定位所有已经被访问过的链接。 
DEMO 
兼容性 

IE7+

Firefox

Chrome

Safari

Opera

7. X+Y 

Css代码 

1. ul + p {  
2.    color: red;  
3. }  

这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段，并将它们的颜色都设置为红色。 
DEMO 
兼容性 

IE7+

Firefox

Chrome

Safari

Opera

8. X>Y 

Css代码 

1. div#container > ul {  
2.   border: 1px solid black;  
3. }  

`X Y`和`X > Y`的差别就是后面这个指挥选择它的直接子元素。看下面的例子： 

Css代码 

1.   
2.    
     
   •       
   •  List Item  
   •         
       
     •            
     •  Child 
       
     •         
       
   •       
     
   •       
   •  List Item 
     
   •       
   •  List Item 
     
   •       
   •  List Item 
     
   •