ホームページ > 記事 > ウェブフロントエンド > CSSセレクターにはどのような種類がありますか?一般的な CSS セレクターの簡単な紹介

CSSセレクターにはどのような種類がありますか?一般的な CSS セレクターの簡単な紹介

不言オリジナル: 2018-08-09 15:59:484029ブラウズ

この記事では、CSS セレクターの使用方法について説明します。どのようなタイプがありますか?一般的に使用される CSS セレクターの簡単な紹介は、必要な場合に参考にしていただければ幸いです。

cssタグセレクター

機能: ページ上の指定されたすべての要素を選択します

構文: タグ名: {}

id selector

機能: id 属性値を通じて要素内の唯一の要素を選択します

構文: #id{}

css クラスセレクター

機能: 要素のクラス属性値を通じて要素のグループを選択します

構文: .class 属性値{}

1 つの要素に対して複数の要素を設定できます。クラス属性値を同時に指定、複数の値はスペースで区切ります

セレクターのグループ化(ユニオンセレクター)

機能: セレクターのグループ化により、複数のセレクターに対応する要素を同時に選択できます

構文: セレクター1、セレクター 2、セレクター N{}

例: ID を p3 として選択し、クラス属性値に p2 タグと h1 タグが含まれる

                 #p3,.p2,h1{
                                  background-color: yellow;
                            }

css ワイルドカードセレクター

機能: ページ上のすべての要素を選択します

構文: *{}

CSS 交差セレクター (複合セレクター)

機能: 複数のセレクターを満たす要素を同時に選択できます

構文: セレクター 1 セレクター 2 セレクター N{}

注 : ID は一意であるため、要素を決定します。id の交差セレクターは使用しません

例: class 属性値に p4 が含まれるスパンを選択します

span.p4{
                                    background-color:#4169E1;
                           }

要素間の関係:

親要素: 子要素を直接含む要素。

子要素: 親要素に直接含まれる要素。

先祖要素: 子孫要素を直接または一時的に含む要素。親要素は先祖要素でもあります。

子孫要素: 祖先要素に直接または間接的に含まれる要素、および子要素も子孫要素です。

兄弟要素: 同じ親要素を持つ要素。

css子孫要素セレクター

機能: 指定された要素の子孫要素を選択します

構文: 先祖要素子孫要素{}

例: divのスパンを選択

  div span {
                                        color: chartreuse;
                                }

css子要素セレクター(IE6および以下のブラウザは非対応です）

機能：指定された親要素の指定された子要素を選択

構文：親要素>子要素

例：div内のspanを選択

                 div>span{
                              background-color: yellow;
                     }

擬似クラスセレクターを使用して表現します要素は特別な状態です。

例: 訪問したハイパーリンク、通常のハイパーリンク、フォーカスのあるテキストボックス

これらの特殊な状態の要素にスタイルを設定する必要がある場合、疑似クラスを使用して接続のスタイルを定義できます

通常のリンク: a:リンク

訪問したリンク: a:visited (色のみ定義可能)

マウスがスライドするリンク: a:hover

クリックされたリンク: a:active

a:link と a: 訪問した間の順序は指定されていませんが、それらは a:hover と a:active の前にある必要があり、a:hover は a:active の前にある必要があります

hover と active は、p:hover p: などの他の要素にも設定できます。 active ただし、IE6 以下は

その他の疑似クラスをサポートしていません:

:focus フォーカスを取得

:before 要素を指定する前

:after 要素を指定した後

::selection 選択された要素 (これは、 Firefox で使用されます::- moz-selection)

要素内のいくつかの特別な位置を表すために疑似要素を使用します

:first-letter: 最初の文字

:fist-line: 文字の最初の行

:before: 要素の先頭部分を表します

通常、before はコンテンツスタイルと組み合わせて使用する必要があります

content を通じて before または after の位置にコンテンツを追加できます

:after : を表します。要素の最後の辺

p タグに最初の文字を入れます黄色の 25px に設定します

   p:first-letter{
                        color:yellow;
                        font-size: 25px;
                    }
                   p:first-line{
                       background: #FF0000;
                   }
                  将content的内容添加到p元素的最前面
                   p:before{
                       content: "ABC";
                   }
                   将content的内容添加到p元素的最后面
                   p:after{
                       content: "DEF";
                   }

css 属性セレクター

機能: 要素内の属性または属性値に基づいて、指定された要素を選択できます

構文: [属性名] 指定した属性を持つ要素を選択

[属性名=属性値] 指定した属性値を含む要素を選択

[属性名^=属性値] 指定した内容で属性値が始まる要素を選択

[属性名$=属性値] 属性値が指定した内容で終わる要素を選択

[属性値*=属性値] 属性値に指定した内容が含まれる要素を選択

    /*为具有title属性的p元素设置背景颜色*/
                p[title]{
                     color: darkorchid;
                }
                /*为title属性值为hello的元素设置一个背景颜色*/
                p[title=hello]{
                     background-color: cornflowerblue;
                }
                /*为title属性是ab开头的元素设置一个背景颜色*/
                p[title^="ab"]{
                     background-color: chartreuse;
                }
                p[title$="d"]{
                     font-size: 28px;
                }

疑似クラスの子要素セレクター

:first-child : 最初の子要素を選択できます

:last-child : 最後の要素を選択できます

:nth-child : 任意の位置の子要素を選択できます

パラメータを指定できます選択する要素を指定するセレクターの後

even: 偶数

odd: 奇数 --of-type

last-of-type

nth-of-type

は、xxx-chlidに似ています。でも××× -child はすべての要素から選択され、xxx-of-type は指定された type から選択されます

例: 最初の p タグを選択します

p:first-child{
                           color:coral;
                      }
                     选中第3个p标签
                     p:nth-child(3){
                           color:chartreuse;
                     }
                     设置表格奇偶行背景颜色不同
                     tr:nth(even){
                                background-color:pink; 
                     }
                    
                     tr:nth(odd){
                                background-color:skyblue; 
                     }

次の兄弟要素セレクター

機能: 直後に指定された兄弟要素を選択できます要素

语法：前一个+后一个

例：选中p标签后的相邻的兄弟span（p和span不一定相邻）

  p+span{
                                     color:red;
                            }

选中后边的所有兄弟元素

语法：前一个~后边所有

否定伪类：

作用：从选种的元素中剔除某些元素

语法： :not(选择器)

例：为所有的p元素设置一个背景颜色，出了class为hello或hello2的元素

              p:not(.hello):not(.hello2){
                                  background-color: antiquewhite;
                          }

CSSセレクターにはどのような種類がありますか?一般的な CSS セレクターの簡単な紹介

関連記事