覚えておきたい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 
     
   •    
     

`#container > は、`id` を 'container' として持つ `div` の下にあるすべての直接の `ul` 要素のみを選択します。最初の `li` の下に `ul` 要素は配置されません。
いくつかの理由から、子ノードを使用してセレクターを結合すると、パフォーマンスに多くの利点があります。実際、JavaScript で「css」セレクターを使用する場合は、これを強くお勧めします。
デモ
互換性

IE7+

Firefox

Safari

Opera

9.
ul ~ p { 色: 赤

}

兄弟ノードの組み合わせセレクターは `X+Y` に非常に似ていますが、それほど厳密ではありません。 `ul + p` セレクターは、指定された要素の直後にある要素のみを選択します。このセレクターは、ターゲット要素に続くすべての一致する要素を選択します。
1. デモ
互換性
3. IE7+

Firefox

Chrome

Safari

Opera

10。

a[タイトル] {

色: 緑

}

これは属性セレクターと呼ばれ、上記の例では、title 属性を持つ要素のみが選択されます。この属性を持たないアンカー タグは、このコードでは変更されません。次に、より具体的にフィルタリングしたい場合はどうすればよいかをもう一度考えてみましょう。それは…

デモ

互換性

IE7+

1. Firefox
2. Chrome
3. Safari

Opera

11

a [href="http://strongme.cn "] {

color: #1f6053; /* nettuts green */

}

上記のコードは、`href` 属性値を `http に設定します。://strongme.cn` のアンカー タグは緑に設定されますが、他のタグは影響を受けません。

値を二重引用符で囲んでいることに注意してください。次に、JavaScript を使用する場合は二重引用符を使用します。可能であれば、標準の CSS3 セレクターを使用してください。
これは機能しますが、このリンクではなく、同様のリンクの場合は、正規表現を使用する必要があります。 デモ

互換性

IE7+

Firefox
Chrome
Safari
Opera

12


CSSコード



a[ href*="strongme"] {

色: #1f6053;

}

Tada はまさに必要なものです。このように、`strongme` の値が `strongme であるかどうかに関係なく、アンカー タグ `Attributes の `href に出現する必要があることが指定されています。 .cn`、`strongme.com`、または `www.strongme.cn` を選択できます。

ただし、これは非常に幅広い表現であることに注意してください。アンカー タグが「strongme」関連以外のサイトを指している場合、より具体的な制限が必要な場合は、文字列の先頭と末尾をそれぞれ「^」と「$」で示します。

デモ

互換性

IE7+

Firefox

Chrome

Safari

1. Opera
3. 13

CSSコード

a[ href^="http"] {

背景: url(path/to/external/icon.png) 繰り返しなし:

}

一部のサイトでは、アンカー タグの横に外部リンク アイコンが表示されています。このようなデザインは、別の Web サイトにリダイレクトされることを明確に示します。
カラット記号を使用して簡単に行うことができます。通常、正規表現で先頭を識別するために使用されます。アンカー属性 `href` 内で `http` で始まるタグを見つけたい場合は、上記と同様のコードを使用できます。

http:// を検索しなかったことに注意してください。https:// が含まれていないため、検索する必要はありません。

それでは、画像を指すすべてのアンカー タグを見つけたい場合はどうすればよいでしょうか?次に、「&」文字を使用してみましょう。
デモ
互換性

IE7+

Firefox

Chrome

Safari

Opera

14

CSSコード

a [href$=".jpg"] {

1. カラー: red;
2. }

今回も文字列の終わりを表すために正規表現 `$` を使用しました。このコードの意味は、すべての画像リンク、または「.jpg」で終わるその他のリンクを検索することです。ただし、この書き方は `gifs` や `pngs` では機能しないことに注意してください。

デモ
互換性



IE7+

Firefox

Chrome

Safari

Opera

15
CSSコード

a [data-filetype="image"] {

カラー: red;

1. }
項目 8 に戻り、すべての画像タイプ `png`、`jpeg`、'jpg'、'gif' を選択するにはどうすればよいですか?複数のセレクターを使用できます。以下をご覧ください:

CSS コード

a[href$=".jpg"]、

a[href$=".jpeg"]、

1. a[href$=".png"]、
2. a[href$=".gif"] {
3. color: red;
4. }
しかし、このように書くのは非常に苦痛であり、効率は非常に低くなります。もう 1 つの方法は、カスタム属性を使用することです。各アンカーポイントに属性「data-filetype」を追加して、このリンクが指す画像のタイプを指定できます。

[html] 画像リンク


CSS コード

a[data-filetype="image"] {

color: red

1. }
デモ

互換性

IE7+

Firefox

Chrome

Safari

Opera

color: red;

}

a[data-info~="image"] {

border: 1px ソリッドブラック

これはあなたの友達が叫ぶと思います。このトリックを知っている人はほとんどいません。 「~」記号は、属性値がスペースで区切られた複数の値であるタグを見つけることができます。
3. 項目 15 の例を続けると、「data-info」属性を設定できます。これを使用して、必要なスペース区切りの値を設定できます。この例では、それらを外部リンクと画像リンクとして示します。
5. CSS コード
7. 愚か者、クリックしてください

   要素がこのフラグを設定した後、「~」を使用してこれらのタグを見つけることができます。
   
   

   CSS コード

   1. /* 値「external」を含むターゲット データ情報属性 */
   2. a[data-info~="external"] {
   3. color: red
   4. }
   6. /*値 "image" */
   7. a[data-info~="image"] {
   8. border: 1px 単色黒
   9. }

   
   17.入力[ type=radio]:checked {

   border: 1px Solid black;

   }

   1. 上記の疑似クラスの書き込みメソッドは、選択されたラジオ ボックスと複数選択ボックスを見つけることができます。これだけです。
   デモ
   2. 互換性
   IE9+

   Firefox
   
   Chrome
   
   Safari
   

   Opera
9. 18. これら 2 つの疑似クラスの「後」。毎日、誰もがクリエイティブな使い方を見つけているようです。選択したタグの周囲にコンテンツを生成します。
10. 「.clear-fix」手法を使用する場合、多くのプロパティが初めて使用されます。
CSS コード


.clearfix:after { 内容: "";

表示: 両方; -サイズ: 0; height: 0;


}
.clearfix {
*display: inline-block;
_height: 1%;
上記のコードは、ターゲットラベルの空白の後に段落を追加し、それをクリアします。この方法では、それを宝庫に入れる必要があります。このトリックは、「overflow:hidden」メソッドが機能しない場合に特に役立ちます。
3. この疑似クラスの他の創造的な使用法を見たい場合は、[ここ](http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-) を参照してください。影/) 。
4. CSS3標準ではコロン「::」を2つ使用可能です。互換性のために、ブラウザは二重引用符も受け入れるようになります。実際、この場合、コロンを使用する方が賢明です。
5. 互換性
7. IE8+
8. Firefox
9. Chrome
10. Safari
11. Opera
13. 19.
CSSコード


div:hover {

背景: #e3e3e3}




言うまでもなく、誰もがそれを知っているはずです。公式には「ユーザーアクション擬似クラス」という言い方があるので少しわかりにくいですが、実際には大丈夫です。ユーザーがマウスを置いた場所に色を付けたい場合は、この疑似クラスの記述メソッドでそれを行うことができます。

13. 古いバージョンの IE は、アンカー `a` タグに追加された `:hover` 疑似クラスでのみ動作することに注意してください。
14. 通常、アンカーリンク上にマウスを置いたときに境界線を追加するときに使用します。
16. CSS コード

a:hover {
border-bottom: 1px ソリッドブラック

}
専門的なヒント: border-bot tom:1px ソリッドブラック;よりテキスト装飾:下線; 見栄えが良くなりました。
互換性
IE6+ (IE6 はアンカータグでのみ動作します)
Firefox
Chrome


Safari

Opera



20. CSS コード

p::first-line {
1. フォントの太さ: 太字
2. フォントのサイズ: 1.2em
3. }

   
   `::` を使用して、段落や最初の単語などのタグの一部を選択できます。ただし、機能するにはブロック タグで使用する必要があることに注意してください。
   
   疑似タグは 2 つのコロン:: で構成されます。
   
   最初の文字を見つける

   CSS コード

   p::first-letter {
   float: left;
   font-size: 2em; : 太字
   フォント-family: cursive;
   padding-right: 2px;
   }
   上記のコードは、ページ上のすべての段落を検索し、それらを各段落の最初の単語として指定します。
   通常、一部のニュース新聞の内容の重要なポイントを強調するために使用されます。

   
   段落の最初の行を検索します
   
   
   
   CSS コード

   p::first-line {

   font-weight: 太字
   1. font-size: 1.2em;
   `::first-line`と同様に、段落の最初の行を選択します。
   4. 互換性のために、古いブラウザは `:first-line`、`:first-letter`、`:before`、`:after` などの単一コロンの記述にも互換性がありましたが、これは新しく導入されたブラウザと互換性があります。機能が動作しません。
   デモ

   互換性
   
   
   
   IE6+
   
   Firefox
   
   Chrome

4. Safari
5. Opera
7. 22.
CSS コード


li: n 番目-child(3) {

color: red

}

`nth - で、プッシュダウン ラベルの最初のいくつかの要素を取得する方法に直面したとき、どこから始めてもよかったときのことを覚えていますか?子ども「あの日々は永遠に過ぎ去ったのです。」
2. 「nth-child」は整数パラメータを受け入れ、0 から始まるわけではないことに注意してください。 2 番目の要素を取得したい場合、渡す値は `li:nth-child(2)` です。
3. 変数名で定義された子タグの数を取得することもできます。たとえば、`li:nth-child(4n)` を使用して 3 要素ごとにタグを取得できます。
デモ互換性




IE9+

Firefox3.5+

Chrome

Safari

10. CSSコード
12. li :nth-last-child(2) {

色: red;
}

`ul` タグ内にさらに N 個の要素があり、これが `li:nth-child(397)` であっても、最後の 3 つの要素だけを取得したいとします。 `nth-last-child` 疑似クラスを使用して置き換えます。

このテクニックは 16 番目の TIP を正確に置き換えることができます。違いは、最後から開始して逆方向に動作することです。
デモ
1. 互換性
3. IE9+
Firefox3.5+

Chrome

Safari

Opera




24。
14. CSS コード
16. ul:nth-of-type(3) {
17. border: 1px Solid black

}


かつては、子ノードを選択するのではなく、子ノードに基づいて選択したいと考えていました。要素のタイプ。

5 つの `ul` タグがあると想像してください。 3 番目のみを変更し、「id」属性を使用したくない場合は、上記のコードのみ「nth-of-type(n)」疑似クラスを使用してそれを実現できます。 3 番目の `ul` タグには境界線が設定されます。

デモ互換性
2. IE9+
3. Firefox3.5+
Chrome

Safari



CSSコード




ul:nth-last-of-type(3) {
Border: 1px 単色黒
}

同様に、`nth-last-of-type` を使用してラベルを逆順に取得することもできます。
互換性

22. IE9+
23. Firefox3.5+
24. Chrome
25. Safari
26. Opera


26. X:first-child 

Css代码 

1. ul li:first-child {  
2.    border-top: none;  
3. }  


这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。 

假设有个列表，没个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。 
DEMO 
兼容性 



27. IE7+
28. Firefox
29. Chrome
30. Safari
31. Opera


27. X:last-child 

Css代码 

1. ul > li:last-child {  
2.    color: green;  
3. }  


跟`first-child`相反，`last-child`取的是父标签的最后一个标签。 
例如 
标签 

Css代码 

1.   
   •    
   •  List Item 
     
   •    
   •  List Item 
     
   •    
   •  List Item 
     
     


这里没啥内容，就是一个了 List。 

Css代码 

1. ul {  
2.  width: 200px;  
3.  background: #292929;  
4.  color: white;  
5.  list-style: none;  
6.  padding-left: 0;  
7. }  
8.    
9. li {  
10.  padding: 10px;  
11.  border-bottom: 1px solid black;  
12.  border-top: 1px solid #3c3c3c;  
13. }  


上面的代码将设置背景色，移除浏览器默认的内边距，为每个`li`设置边框以凸显一定的深度。 


 


DEMO 

兼容性 



32. IE9+
33. Firefox
34. Chrome
35. Safari
36. Opera


28. X:only-child 

Css代码 

1. div p:only-child {  
2.    color: red;  
3. }  


说实话，你会发现你几乎都不会用到这个伪类。然而，它是可用的，有会需要它的。 

它允许你获取到那些只有一个子标签的父标签。就像上面那段代码，只有一个段落标签的`div`才被着色。 

Css代码 

1.  My paragraph here. 

     
2.    
3.   
4.    

    Two paragraphs total. 

     
5.    

    Two paragraphs total.