ホームページ > 記事 > ウェブフロントエンド > いくつかの一般的な CSS セレクターの例の詳細な説明
いくつかの一般的な CSS セレクターの例の詳細な説明
- 伊谢尔伦オリジナル
- 2017-05-30 13:36:112192ブラウズ
外部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 番目の子である場合のスタイルを指定します。
6 :only-child 要素が親の唯一の子要素である場合に有効になるスタイルを指定します7 :empty 空の要素のスタイルを指定します要素ステータスの疑似クラスセレクター
1 :hoverマウスポインターが要素上にあるときのスタイル2 : フォーカスを取得する要素のフォーカススタイル
3 : 有効化された有効化された要素のスタイル4 : 無効化された要素の無効化されたスタイル5 : 選択された要素のチェックされたスタイル(チェックボックス、 radio) 6 :: ユーザーによって選択されたいくつかの要素の選択スタイル 7 : not (selector) 選択 このセレクターのスタイルではありません8 :target は現在アクティブな #news 要素を選択します。通常はアンカーポイントで使用されます以上がいくつかの一般的な CSS セレクターの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。