Ki sa ki se yon CSS seleksyone sele?

Estrikti yon dokiman HTML sanble ak yon pyebwa fanmi. Nan fanmi ou, ou gen paran ou yo ak lòt moun ki te vin anvan ou. Sa yo se zansèt ou yo. Timoun yo ak moun ki vini apre ou nan pyebwa sa a se pitit pitit ou yo. HTML travay nan yon menm jan an. Eleman ki andedan lòt eleman yo se desandan yo. Pou egzanp, depi prèske tout eleman HTML se andedan nan Tags, yo ta dwe yon desandan nan ki eleman. Relasyon sa a enpòtan pou konprann lè ou kòmanse travay ak CSS epi ou bezwen sib eleman espesifik pou aplike estil vizyèl.

CSS Seleksyone Desann

Yon seleksyon desandan CSS aplike eleman ki anndan yon lòt eleman (oswa plis presize, yon eleman ki se yon lòt eleman). Pou egzanp, yon lis ki pa genre gen yon tag ak Tags kòm pitit pitit. Ann itilize HTML sa yo kòm yon egzanp:

• sa a se yon lyen

  Tags yo LI yo se pitit pitit nan UL tag la. A tag se yon pati nan tou de LI la (pitit pitit) ak UL (pitit pitit pitit) Tags. Si ou reflechi sou panse sou sa a lè l sèvi avèk egzanp lan pyebwa fanmi an,

  ta dwe paran an,
  • ta dwe eleman sa a pitit, ak ak pitit pitit la nan
    .

    Se konsa, kouman ou ta sib eleman espesifik nan yon paj entènèt lè l sèvi avèk sa yo selektè descendant? Premyèman, ou dwe defini selektè descendant lè l sèvi avèk de (oswa plis) selektè tip ki separe pa espas.

    li yon {tèks-decoration: okenn; }}

    Nan egzanp sa a, estil yo ta sèlman aplike nan yon eleman lyen () ki se yon pati nan yon eleman lis-atik (

    • ). Tout lòt lyen sou paj la ki pa yon pati nan yon atik lis pa ta jwenn sa a style.

      Yon bagay enpòtan yo sonje se ke li pa gen pwoblèm ki jan anpil Tags yo nan ant Tags sa yo ou ka itilize nan seleksyon pitit ou. Si dezyèm eleman an fèmen nenpòt kote nan premye eleman li pral chwazi kòm yon desandan.

      Si ou vle chwazi tout lankr ki soti nan eleman UL, ou ta ekri:

      UL yon {tèks-decoration: Pa gen; }}

      Koulye a, estil sa yo ap aplike nan nenpòt ki lyen ki se yon pati nan yon atik lis. Ou ta ka ekri tou seleksyon sa a

      Li yon {tèks-decoration: Pa gen; }}

      Sa a se yon selektè descendant ki itilize plis pase de selektè tip. Nan ka sa a, sa a ta aplike nan lyen ki andedan kòm lis atik-yo ak tou andedan yon lis unordered.

      Sèvi ak klas selektè yo ak selekteur ID yo

      Selektè yo ke ou ap desann soti nan pa gen toujou gen tip desandan. Pou egzanp, imajine ou te gen yon zòn nan sit la (tankou yon divizyon) ak yon atribi ID nan "afichaj". Ou ta ka mete kanpe yon selektè descendant koupe nan ID sa a:

      #billboard UL {background-color: # cc; }}

      Sa a ta style lis la unordered ki se yon pati nan yon eleman ak yon ID nan "afichaj". Ou ka fè menm bagay la pou valè klas yo.

      div.billboard UL {background-koulè: # cc; }}

      Sa a sipoze ke divizyon an gen yon valè klas nan "afichaj". CSS ki pi wo a ta style

      eleman an andedan nan nenpòt divizyon ki gen valè sa a klas la.

      Ou ka jwenn vrèman lou-men ak vèbal ak selektè desandan. Pou egzanp, si ou itilize Dreamweaver yo ekri kòd HTML ou, gen yon anviwònman lè ou ajoute nouvo règ CSS ki pral oto-kreye seleksyon an ki baze sou plasman nan kurseur ou a sou paj sa a. Ki sa ki Dreamweaver fè nan ka sa a se kreye yon pwodiktè seleksyone ak longè desandan. Espesifik anpil pa nesesè pou CSS ou pou travay. Ki sa ou vle fè se jwenn yon balans ant yon selektè descendant ki se espesifik ase pou ke ou ka egzèsis desann nan eleman yo egzak ou bezwen (san yo pa moun manier ou pa vle afekte) san yo pa gen règleman CSS ki gen selektè ki tro gwo.