CSS では、セレクターはスタイルを設定する必要がある要素を選択するためのモードです。CSS セレクターは CSS スタイルのオブジェクト、つまり「スタイル」が Web ページ内のどの要素に作用するかを指定します。構文形式は「selector" {style}」です。 HTML ページの要素は CSS セレクターを通じて制御されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS では、セレクターはスタイルを設定する必要がある要素を選択するためのモードです。
CSS を使用して HTML ページ内の要素を 1 対 1、1 対多、または多対 1 で制御するには、CSS セレクターを使用する必要があります。 HTML ページの要素は CSS セレクターを通じて制御されます。
各 CSS スタイル定義は 2 つの部分で構成され、形式は次のとおりです: [code] セレクター {style} [/code] {} より前の部分は「セレクター」です。「セレクター」は、{} 内の「スタイル」のオブジェクト、つまり「スタイル」が Web ページ内のどの要素に作用するかを指定します。
css にはどのようなセレクターがありますか#
要素を選択します。
要素。
要素。
例 | 例の説明 | |
---|---|---|
class | .introclass="intro" を持つすべての要素を選択します。 | |
class1.class2 | .name1.name2クラス属性を選択します。 name1 と name2 のすべての要素が含まれます。 | |
class1.class2 | .name1 .name2クラス名 name1 として選択しますelement すべての classname name2 要素の子孫。 | |
#id | #firstnameid="firstname" の要素を選択します。 | |
## すべての要素を選択します。 | ||
element | pすべての | |
.classp.intro | class="intro" < ですべて選択;p>要素。 | |
elementdiv, p | すべての||
elementdiv p | ##element | |
##div > p親要素が < すべてであることを選択してください div 内の要素>。 |
element | |
div p
の直後の最初の要素を選択します。 要素。 |
element1 | ~|
p ~ ul
で始まる要素を選択します; 各
|
[ | attribute | ]
target 属性を持つすべての要素を選択します。 | [ | attribute | =
[target=_blank]ターゲットをすべて指定して選択="_blank" 属性を持つ要素。 | [ | 属性 | ~=
[タイトル~=花]タイトルを選択してください属性には、「flower」という単語を含むすべての要素が含まれます。 | [ | 属性 | |=
[lang|=en]言語を選択属性値が「en」で始まるすべての要素。 | #[ | 属性^= | 値
a[href^="https"]src 属性値が「https」で始まるすべての要素を選択します。 | #[属性 | $=値 | ]
src 属性が「.pdf」で終わるすべての要素を選択します。#[ | 属性*= | 値] |
href 属性値に「abc」部分文字列が含まれる各要素を選択します。:active | a:active | アクティブなリンクを選択します。 |
::after | p::after | 各 のコンテンツの後にコンテンツを挿入します。 |
::before | p::before | 各 のコンテンツの前にコンテンツを挿入します。 |
:checked | input:checked | 選択した各要素を選択します。 |
:default | input:default | デフォルトの要素を選択します。 |
:disabled | input:disabled | 無効になっている各要素を選択します。 |
:empty | p:empty | 子要素を持たないすべての 要素 (テキスト ノードを含む) を選択します。 |
:enabled | input:enabled | 有効な各要素を選択します。 |
:first-child | p:first-child | 親要素要素の最初の子要素である各 を選択します。 |
::first-letter | p::first-letter | 各 要素の最初の文字を選択します。 |
::first-line | p::first-line | 各 要素の最初の行を選択します。 |
:first-of-type | p:first-of-type | 親に属する最初の 要素を選択します各 要素の要素。 |
input:focus | フォーカスを取得する入力要素を選択します。 | |
:fullscreen | 全画面モードの要素を選択します。 | |
a:hover | マウス ポインターが置かれているリンクを選択します。 | |
input:in-range | 値が指定された範囲内にある入力要素を選択します。 | |
input:indeterminate | 不確定状態にある入力要素を選択します。 | |
input:invalid | 無効な値を持つすべての入力要素を選択します。 | |
language | )p:lang(it) | 「it」に等しい lang 属性を選択します(イタリア語) 各 |
:last-child | p:last-child | 親要素の最後の子要素である各 要素を選択します。 |
:last-of-type | p:last-of-type | 親に属する最後の 要素を選択しますelement 各 要素。 |
:link | a:link | 未訪問のリンクをすべて選択します。 |
:not(selector) | :not(p) |
ではない各要素を選択します; 要素。 < td> > |
:nth-child(n) | p:nth-child(2) | 属する要素を選択してくださいその親へ 各 要素の 2 番目の子。 |
:n 番目の最後の子(n) | p:n 番目の最後の子(2) | 同じ上記と同様に、最後の子要素から数えます。 |
:n 番目のタイプ(n) | p:n 番目のタイプ(2) | 選択親の 2 番目の 要素に属する各 要素。 |
:n 番目の最後のタイプ(n) | p:n 番目の最後のタイプ(2) | 上記と同じですが、最後の子要素から数え始めます。 |
:only-of-type | p:only-of-type | 親に属する唯一の 要素を選択しますelement 各 要素。 |
:only-child | p:only-child | 親要素の唯一の子要素である各 要素を選択します。 |
:optional | input:optional | 「required」属性のない入力要素を選択します。 |
:out-of-range | input:out-of-range | 値が指定範囲を超える入力要素を選択します。 |
::placeholder | input::placeholder | 「placeholder」属性が指定されている入力要素を選択します。 |
:read-only | input:read-only | 「readonly」属性を指定した入力要素を選択します。 |
:read-write | input:read-write | 「readonly」属性を指定していない入力要素を選択します。 |
:required | input:required | 「required」属性が指定されている入力要素を選択します。 |
:root | :root | ドキュメントのルート要素を選択します。 |
::selection | ::selection | ユーザーが選択した要素の部分を選択します。 |
:target | #news:target | 現在アクティブな #news 要素を選択します。 |
:valid | input:valid | 有効な値を持つすべての入力要素を選択します。 |
:visited | a:visited | 訪問済みのリンクをすべて選択します。 |
(学習ビデオ共有:css ビデオ チュートリアル)
以上がCSSセレクターとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。