Najlepszy samouczek Połączenie selektorów CSS W 2024 r. W tym samouczku możesz dowiedzieć się Połączenie selektorów CSS,potomstwo Picker,Przykłady,selektory dziećmi,Przykłady,Przylega Selector Rodzeństwo,Przykłady,Zwykli sąsiednie selektory rodzeństwo,Przykłady,

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 »
Połączenie selektorów CSS
10/30