Vifaa vya kawaida wa CSS

Vifaa vya kawaida wa CSS

Vifaa vya kawaida ni mekanizimu ya kueleza uhusiano kati ya vifaa vya kawaida.

Mchaguli wa CSS inaweza kuwa na vifaa vya kawaida zaidi kama vifaa vya kawaida. Kati ya vifaa vya kawaida, tunaweza kuwa na vifaa vya kawaida.

Kwenye CSS kuna vifaa vya kawaida tano:

  • Mchaguli wa mwanafunzi wa kuzio wengi (kiumbo)
  • Mchaguli wa mwanafunzi (>)
  • Mchaguli wa wabaya wenzao wadogo (+)
  • Mchaguli wa wabaya wengi wa wenzao (~)

Mchaguli wa mwanafunzi wa kuzio wengi

Mchaguli wa mwanafunzi wa kuzio wengi unaingiliana na vifaa vya mwanafunzi walio katika elementi yenye uhusiano wa mwanafunzi.

Mivumbuzi ya hivi karibuni inachagia vifaa vya <p> vyote vilivyo katika elementi ya <div> yote:

Mivumbuzi

div p {
  background-color: yellow;
}

Jifunze kufanya kwa mwenyewe

Mchaguli wa mwanafunzi

Mchaguli wa mwanafunzi unaingiliana na vifaa vya mwanafunzi walio katika elementi yenye uhusiano wa mwanafunzi.

Mivumbuzi ya hivi karibuni inachagia vifaa vya <p> vyote vilivyo katika elementi ya <div> yote:

Mivumbuzi

div > p {
  background-color: yellow;
}

Jifunze kufanya kwa mwenyewe

Mchaguli wa wabaya wenzao wadogo

Mchaguli wa wabaya wenzao wadogo unaingiliana na vifaa vya wenzao walio kina kuelekea kwa elementi yenye uhusiano wa huzuni.

Vifaa vya wenzao (walio katika elementi yako) lazima waweze kwa elementi yako mmoja, 'kina' inamaanisha 'kina kuelekea kuzingatia'.

Mivumbuzi ya hivi karibuni inachagia vifaa vya <p> vyote ambavyo vinapenda elementi ya <div> yote:

Mivumbuzi

div + p {
  background-color: yellow;
}

Jifunze kufanya kwa mwenyewe

Mchaguli wa wabaya wengi wa wenzao

Mchaguli wa wabaya wengi wa wenzao unaingiliana na vifaa vya wenzao wa elementi yenye uhusiano wa huzuni wote.

Mivumbuzi ya hivi karibuni inachagia vifaa vya <p> vyote vilivyo katika elementi ya <div> yote:

Mivumbuzi

div ~ p {
  background-color: yellow;
}

Jifunze kufanya kwa mwenyewe

Vifaa vya mchaguli vya CSS vya kawaida

Mchaguli Mivumbuzi Maelezo ya mivumbuzi
element element div p Chagia elementi ya <div> zote ya <p>.
element>element div > p Wafanyikia kila <p> element iliyohesha element <div>.
element+element div + p Wafanyikia kila <p> element iliyosambaa kwa element <div>.
element1~element2 p ~ ul Wafanyikia kila <ul> element iliyopo kwenye element iliyohesha <p>.

Kueleza kwa kina

Kitabu cha kanda:Muundo wa mchezo wa kwanza wa CSS

Kitabu cha kanda:Muundo wa mchezo wa kina wa CSS

Kitabu cha kanda:Muundo wa mchezo wa mdomo wa CSS