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

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

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

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

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

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

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

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

要素属性セレクター

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 であるすべての要素を表します。

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

子孫セレクターは、特定の要素の子孫である要素を選択できます。例: 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;} は、テキストの最初の行に特別なスタイルを設定します

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

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

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

疑似クラスセレクター

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

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

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

2 : フォーカスを取得する要素のフォーカススタイル

以上がいくつかの一般的な CSS セレクターの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。