記事ディレクトリ
CSSレッスン2-複雑なセレクター
グループセレクター
フォーマット
选择器1,选择器2,,,选择器n{声明的属性和属性值}
例：
p,h1{
color: blue;
}
複数のセレクターのスタイルを変更するために使用されます。単純なセレクターで構成されるセレクターは、単純なセレクターの任意の組み合わせにすることができます。上記のコード例に示すように、pタグとh1タグのフォントの色が変更されます。
属性セレクター
属性名に基づいて要素を検索する
フォーマット
元素[属性名]{
声明的属性和属性值;
}
例：
p[id]{
color: blue;
}
要素の名前を前に追加してから、属性の名前を追加します。たとえば、上の例では、IDを持つ要素を含むのはpタグで、フォントの色を青に設定します。
属性値に基づいて正確に見つける
フォーマット
元素[属性名=属性值]{
声明的属性和属性值;
}
例：
p[class = 'p2']{
color: blue;
}
これは、属性名による上記の検索と似ていますが、より正確です。属性名の後ろの属性値に対して正確です。上記の例は、条件がクラス属性を持つpタグであり、属性値がp2であるという点を除いて、pタグに対するものです。 。
複数の属性セレクター
フォーマット
元素[属性名或属性表达式][属性名或属性表达式]..{
声明的属性和属性值;
}
例：
p[title][class]{
color: blue;
}
要素の後に追加します。+∞属性名または属性式を追加できますが、必須ではありません。上記の例は、title属性とclass属性の段落pタグのスタイルの設定です。
属性値に基づくおおよその検索
フォーマット
元素[元素名~=属性值]{
声明的属性和属性值;
}
または
元素[属性名|=值]{
声名的属性和属性值;
}
例：
p[class~='red']{
color: blue;
}
ここで〜=は、ほぼ等しい、つまり、ほぼ等しいという条件を満たすラベルを見つけることに注意してください。上記の例は、赤の属性名のラベルを含む、クラス属性の値の設定です。
タグで探す
フォーマット
元素名1~元素名2{
声名的属性和属性值;
}
例：
a~p{
color: blue;
}
aタグの後の各pタグは、スタイルが変更されています。
派生セレクター
子孫セレクター
フォーマット
父类标签 子类标签{ /*注意俩标签中间有空格*/
声名的属性和属性值;
}
例：
div strong{
color: blue;
}
子孫セレクターは、スペース文字で区切られた2つ以上の単純なセレクターで構成される文字列です。直接の子ノードでも間接の子ノードでもかまいません。上記の例では、divのstrongタグのスタイルが変更されています。変更されました。
子要素セレクター
フォーマット
父标签>子标签{
声名的属性和属性值;
}
例：
div>p>strong{
color: blue;
}
>で区切られた直接の子ノードを使用します。たとえば、直接の子ノードを順番に使用すると、一度に他のタグにジャンプすることはできません。上記の例は、div–> p–> strongの順に検索し、strongタグのスタイルを変更します。
隣接する兄弟セレクター
フォーマット
父标签+子标签{
声名的属性和属性值;
}
例：
#div1 + p{
color: blue;
}
隣接する兄弟セレクターは、別の要素の直後の要素を選択でき、どちらも同じ親要素を持ちます。注：サブコンバイナーと同様に、隣接する兄弟の隣に空白文字が存在する場合があります。
私もプログラミングの初心者で、どうしても理解ミスがあるのは避けられませんが、読んだ後にコメントを書いて頂ければ幸いです。
