CSS学習ノート--組み合わせ選択子

CSSコンビネーションセレクタ

CSSコンビネーションセレクタには、様々な単純なセレクタの組合せが含まれる.
CSS 3には、以下の4つの組み合わせが含まれる.

子孫セレクタ(スペースで区切られた)

サブエレメントセレクタ(番号より大きい)

隣接兄弟セレクタ(プラス記号で区切られた)

普通兄弟セレクタ(ダッシュで区切られた)

子孫セレクタ

子孫セレクタは、エレメントの子孫エレメントを選択するために使用します.

div p
{
  background-color:yellow;
}

 

サブエレメントセレクタ

子エレメントセレクタ(Child selectors)は、子孫セレクタと比較して、ある要素の子エレメントとしてのみ選択できます.

div>p
{
  background-color:yellow;
}

隣接兄弟セレクタ

隣接する兄弟セレクタ(Adjacent sibling selector)は、別の要素の直後の要素を選択し、両方に同じ親要素があります.
隣接する兄弟セレクタ(Adjacent sibling selector)は、別の要素の直後の要素を選択し、同じ親要素を持つ必要がある場合に使用します.

div+p
{
  background-color:yellow;
}

後続兄弟セレクタ

後続の兄弟セレクタは、指定したすべての要素の後にある隣接する兄弟要素を選択します.

div~p
{
  background-color:yellow;
}

 
転載先:https://www.cnblogs.com/lyan/p/9984315.html