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

.clearfix:after { 内容: "";

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

*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}




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

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

互換性
IE6+ (IE6 はアンカータグでのみ動作します)
Firefox

Safari

Opera

20. CSS コード

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.