いくつかの一般的な CSS セレクターの例の詳細な説明-CSSチュートリアル-php.cn

いくつかの一般的な CSS セレクターの例の詳細な説明

伊谢尔伦

リリース： 2017-05-30 13:36:11

オリジナル

2209 人が閲覧しました

外部CSSスタイルシートのインポート方法

リンクタグを使用して外部CSSスタイルシートをインポート

<link rel="stylesheet" href="css/demo01.css">

ログイン後にコピー

外部スタイルシートをスタイルシートにインポート(インポート)

@import url("/crazy-html5/06css/css/demo01.css");

ログイン後にコピー

内部スタイルシートを使用

内部スタイルシートは特定のWebページで動作する定義方法は、headヘッダーにstyleタグを追加することです。styleタグにページのスタイルを追加できます。

<head>
    <style>
        table {
            background: #003366;
        }
    </style>
</head>

ログイン後にコピー

セレクターの知識ポイント

要素属性セレクター

1) 通常のラベルセレクター

table:{background:red;}

2) 特定の属性を含むラベル

p[id ]{background: red;} id属性を含むp要素を表します

3) 属性を含み、その属性値が特定の値であるタグ

p[id=aaa]{background:red;} id属性を含むことを表します、および id=aaa

の p 要素4) 属性を含み、その属性値が特定の値で始まる要素

p[id=^aaa]{background:red;} は、id 属性が含まれていることを意味します。 idの値がaaaで始まり、先頭のp要素

5) 属性を含み、属性値が特定の値で終わる要素

p[id=$c]{background:red;} を意味しますid 属性が含まれ、id の値は c で終わります。 p 要素

ID セレクター

id セレクターは、ID が特定の値である要素を指定します。たとえば、#myp は ID が myp である要素を表します。値。記号 #

クラスセレクターは、クラス値と一致する要素です。たとえば、。 myclass は、クラス値が myclass であるすべての要素を表します。

クラスセレクターは、要素セレクターと組み合わせて使用できます。たとえば、p. important{color:red;} が有効になるには、両方のセレクターの条件を満たしている必要があります。

セレクターと子孫セレクターが含まれます

子孫セレクターは、特定の要素の子孫である要素を選択できます。例: h1 em{color:red}。このルールは、子孫である em 要素のテキストを変更します。 h1 要素を赤に変換しても、他の em テキストはこのルールの影響を受けません。

子セレクター

は子孫セレクターに似ていますが、要素の特定の直接の子孫にのみ影響します。たとえば、 h1>strong{color:red;} は h1 要素の最初のレベルの強い要素に作用し、他のレベルは影響を受けません

隣接する兄弟セレクター

別の要素の直後に要素を選択する必要がある場合element 要素があり、両方が同じ親要素を持っている場合は、h1+p{margin-top:50px;} などの隣接する兄弟セレクターを使用して、h1 要素の直後に表示される段落を選択できます。 h1 要素と p 要素には、同じ親。複数の要素に同時に作用する要素

セレクターグループ化

たとえば、h2, p{color:gray;} は、h2 要素と p 要素の両方に作用します。

* は、任意の要素に一致するワイルドカードセレクターです

擬似要素セレクター

1):first-line{color:red;} は、テキストの最初の行に特別なスタイルを設定します

2):first -letter{ color:red;} テキストの最初の文字に特別なスタイルを設定します

:after、:before セレクターなし

:before{} を使用して、要素のコンテンツの前にコンテンツを挿入できます。

:after{} は、要素コンテンツの後にコンテンツを挿入して指定できます。たとえば、

p:before{
    content:url("img.png");
}

ログイン後にコピー

after と before は引用符で指定できます。ネストされた参照の引用タイプを設定するためにカウンターとともに使用されます

<style>
    p>p {
        quotes: "《" "》"
    }
    p>p::before{
      content: open-quote;
    }
    p>p::after{
      content:close-quote;
    }
</style>

ログイン後にコピー

後および前はカウンターとともに使用できます

カウンターを使用してテキストの前に複数レベルの数字を追加できます。詳細についてはここでは説明しません。

疑似クラスセレクター

1 :rootセレクターはドキュメントのルート要素と一致します

2 :first-childは、要素が親の最初の子の場合のスタイルを指定します

3 :last-childは、いつスタイルを指定するかを指定します要素は親の最後の子です

4 :nth-child(n) は要素が親の n 番目の子である場合のスタイルを指定します

n が奇数の場合に一致します要素が親の奇数である場合子供のスタイル

スタイル

5 :nth-last-child(n) は、要素が親

の最後から n 番目の子である場合のスタイルを指定します。