Cad iad na príomhchineálacha de roghnóirí CSS?

Question

Accepted Answer

Roghnóirí a bhíonn ag díriú ar an bhfaisnéis ar ar chóir don riail a bheith i bhfeidhm. Tá siad ag foluain ó shimplí (de réir lipéad) go dtí cumhachtaí comhcheangaltóirí. ```css /* Basic selectors */ p { } /* type: all

*/ .card { } /* class: elements with class="card" (reusable) */ #header { } /* id: the one element with id="header" (unique) */ * { } /* universal: every element */ [type="text"]{ } /* attribute: inputs with type=text */ ``` ## Comhcheangaltóirí — an caidreamh idir eilimintí ```css .menu li { } /* descendant: any li INSIDE .menu (any depth) */ .menu > li { } /* child: only DIRECT children li */ h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */ h2 ~ p { } /* general sibling: all p siblings after an h2 */ ``` Tá an difríochtaí ann idir spás (fochéimí) agus `>` (leanbh díreach): bíonn `.menu li` ag teacht ar `li`s a bhíonn foluain go domhain freisin, agus bíonn `.menu > li` ag teacht ar an leibhéal barr amháin. ## Pseudo-aicmí agus pseudo-eilimintí ```css a:hover { } /* state: while hovered */ li:first-child { } /* structural: the first li */ li:nth-child(2n){ } /* every even li */ p::first-line { } /* pseudo-element: the first rendered line */ ``` ## Grúpáil agus roghnóirí nua-aimseartha ```css h1, h2, h3 { } /* apply to all three */ :is(h1, h2) a { } /* :is() shortens long selector lists */ .card:has(img) { } /* :has() — a parent that CONTAINS an img */ ``` ## Cén fáth atá sé tábhachtach Is iad na roghnóirí an bealach ar a dhéanann tú stíleanna a nascadh le marcáil. Ma tá an chumhacht agat ar aicmí (an fhuiriseoir oibre), ar chomhcheangaltóirí (do chaidreamh), agus ar bhréigchlásal struchtúrach/stáit, is féidir leat díriú go beacht gan aicmí bhreise a chur i ngach áit — agus déanann na breiginn `:is()`/`:has()` nua-aimseartha díriú casta geal. Bí i bhfabhar aicmí thar ids/foluain throm chun an sainiúlacht a choimeáil.