Latest web development tutorials

Połączenie selektorów CSS

Połączenie selektorów CSS

uwaga Selektory kombinowane pokazują bezpośredni związek między tymi dwoma selektorów.

Selektory CSS obejmować kombinację różnych kombinacji prostych przełączników.

W CSS3 zawiera cztery kombinacje:

  • Selektor potomka (oddzielone spacjami)
  • Selektor elementu podrzędnego (większe niż wyznaczone)
  • Przylega selektor rodzeństwa (plus rozdzielany)
  • Brat Zwyczajne selektor (oddzielonych myślnikiem)

potomstwo Picker

Selektor potomka pasuje do wszystkich elementów godnych elementów potomnych.

Poniższy przykład wybiera wszystkie <p> element do elementu <div>:

Przykłady

div p
{
background-color:yellow;
}

Spróbuj »


selektory dziećmi

W porównaniu z selektorów potomnych, sub-selektorów Selektory (dziecko) może wybrać element jako element potomny elementu.

Poniższe przykłady wybrany element <div> we wszystkich bezpośrednich elementów podrzędnych <p>:

Przykłady

div>p
{
background-color:yellow;
}

Spróbuj »


Przylega Selector Rodzeństwo

Przylega selektor rodzeństwa (w sąsiedztwie selektor rodzeństwa) wybrać kolejny element zaraz po elemencie, a obie mają ten sam element nadrzędny.

Jeśli chcesz od razu wybrać inny element po elemencie, a obie mają ten sam element nadrzędny, można skorzystać z sąsiadującego selektor rodzeństwa (obok selektora rodzeństwo).

Poniższy przykład wybiera cały pierwszy w elemencie <div> po elemencie <p>:

Przykłady

div+p
{
background-color:yellow;
}

Spróbuj »


Zwykli sąsiednie selektory rodzeństwo

Wspólna sąsiedztwie selektor rodzeństwa, aby zaznaczyć wszystkie z wymienionych elementów rodzeństwa.

Poniższy przykład wybiera wszystkie <div> elementy wszystkich przylegającym rodzeństwo <p>:

Przykłady

div~p
{
background-color:yellow;
}

Spróbuj »