検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >覚えておきたいCSSセレクター30種類_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:53:511133ブラウズ

あなたは `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+
      2. Chrome
      3. Safari
      4. 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. デモ
      2. 互換性
    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
      2. Chrome
      3. Safari
      4. 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. }
      4. 項目 8 に戻り、すべての画像タイプ `png`、`jpeg`、'jpg'、'gif' を選択するにはどうすればよいですか?複数のセレクターを使用できます。以下をご覧ください:


    CSS コード

    a[href$=".jpg"]、

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


    CSS コード

    a[data-filetype="image"] {

    color: red
    1. }
      4. デモ
    互換性



    IE7+

    Firefox

  • Chrome
  • Safari
  • Opera
    • color: red;


    }

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

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

      3. これはあなたの友達が叫ぶと思います。このトリックを知っている人はほとんどいません。 「~」記号は、属性値がスペースで区切られた複数の値であるタグを見つけることができます。
    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. デモ
      2. 互換性
      IE9+

      Firefox

      Chrome

      Safari

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


      13. .clearfix:after { 内容: "";

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

      }

      .clearfix {
        *display: inline-block;
        2. _height: 1%;
        3. 上記のコードは、ターゲットラベルの空白の後に段落を追加し、それをクリアします。この方法では、それを宝庫に入れる必要があります。このトリックは、「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.
        14. CSSコード


      div:hover {

      背景: #e3e3e3}




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

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

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

      }

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


      Safari

      Opera

      20. CSS コード

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


        `::` を使用して、段落や最初の単語などのタグの一部を選択できます。ただし、機能するにはブロック タグで使用する必要があることに注意してください。

        疑似タグは 2 つのコロン:: で構成されます。

        最初の文字を見つける

        CSS コード

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


        段落の最初の行を検索します



        CSS コード

        p::first-line {

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

        互換性



        IE6+

        Firefox

        Chrome

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


        li: n 番目-child(3) {

        color: red

        }

          2. `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) {

        13. 色: 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

        18. }

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

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

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

        Safari



        CSSコード


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

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

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


        27. 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


        32. 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


        37. 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. 

            
      


    上面例子中，第二个`div`不会被选中。一旦第一个`div`有了多个子段落，那这个就不再起作用了。 
    DEMO 
    兼容性 

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera


    • 29. X:only-of-type 

    Css代码 

    1. li:only-of-type {  
    2.    font-weight: bold;  
    3. }  


    结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的`ul`标签？ 

    使用`ul li`会选中所有`li`标签。这时候就要使用`only-of-type`了。 

    Css代码 

    1. ul > li:only-of-type {  
    2.    font-weight: bold;  
    3. }  


    DEMO 
    兼容性 

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera


    • 30. X:first-of-type `first-of-type`伪类可以选择指定标签的第一个兄弟标签。 

    测试 

    Css代码 

    1.   
    2.    

       My paragraph here. 

        
    3.    
          
      •       
      •  List Item 1 
        •   
      •       
      •  List Item 2 
        •   
      •    
        
    4.    
    5.    
          
      •       
      •  List Item 3 
        •   
      •       
      •  List Item 4 
        •   
      •    
           


    リスト項目 2 を取り出してください。すでに取り出している場合、または諦めている場合は、続けてください。

    解決策 1
    方法はたくさんありますが、より便利な方法をいくつか見てみましょう。 1 つ目は「first-of-type」です。

    CSS コード

    1. ul:first-of-type > li:nth-child(2) {
    2. font-weight: 太字
    3. }

    最初のものを見つける「ウル」タグを見つけてから、直接の子タグ `li` を見つけてから、2 番目の子ノードを見つけます。

    解決策 2 もう 1 つの解決策は、近接セレクターです。
    この場合、「p」の下で直接の「ul」タグを見つけてから、その最後の直接の子タグを見つけます。


    解決策 3 これらのセレクターを試してみましょう。見てみましょう:

    CSS コード

      ul:first-of-type li:nth-last-child(1) {
      2. font-weight: 太字
      3. }

    取得it first ページ上の最初の `ul` タグに移動し、次に最後の子タグを見つけます。
    デモ
    互換性


    IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera


    • 結論
    ブラウザのバージョンを妥協したい場合は、 IE6 などの場合は、これらの新しいものを使用します。セレクターを使用する場合は注意が必要です。ただし、IE6 がこれらの新しいスキルの学習を妨げないようにしてください。そうなると、あなたは自分自身に対して残酷になってしまいます。 [互換性リスト](http://www.quirksmode.org/css/contents.html) を必ず確認するか、[Dean Edward の優れた IE9.js スクリプト](http://code.google.com/p / ie7-js/) を使用して、ブラウザーでこれらの機能を使用できるようにします。

    2 番目に、jQuery を使用する場合は、ネイティブ CSS3 セレクターを使用するようにしてください。もしかしたら、コードの実行速度が速くなるかもしれません。これにより、セレクター エンジンはセレクター自身の代わりにブラウザーのネイティブ パーサーを使用できるようになります。

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：Bootstrap 学習メモ (1)_html/css_WEB-ITnose次の記事：Bootstrap 学習メモ (1)_html/css_WEB-ITnose

    関連記事

    続きを見る