Í hvert skipti sem við notum CSS notum við valsmenn. En þrátt fyrir þetta eru CSS valsmenn einn af vanræktustu hlutum forskriftarinnar.
Við tölum um stóra umbreytingu í CSS3 en gleymum of oft að grunnatriði. Góð notkun valsmóta gerir daglegt kóðun einfaldari og glæsilegri. Í dag ætla ég að ná yfir 10 valsmenn sem oft lenda í hugum okkar, en þau eru bæði skilvirk og mjög gagnleg.
Seljandinn getur verið sá sem þú manst mest auðveldlega en það er oft undirnotaður. Það sem það gerir er að stíll allt á síðunni og það er frábært að búa til endurstillingu og einnig til að búa til nokkrar vanrækslu á síðu eins og leturgerð fjölskyldu og stærð sem þú vilt hafa.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Þessi valbúnaður er kallaður aðliggjandi val og það sem það gerir er að velja þann þátt sem er strax eftir fyrsta þáttinn. Ef þú vildir velja fyrsta div eftir hausinn þinn myndi þú slá inn:
header + div {margin-top: 50px;}Þessi valbúnaður velur aðeins bein börn ólíkt AB sem velur hvaða börn sem eru A. Þessi val er mælt fyrir þegar þú ert að vinna með fyrsta stigs börn foreldrahlutans. Til dæmis ef þú vilt velja listalistann á fyrsta stigi í óskráðum lista sem lítur svona út:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Þú vildir nota þennan val vegna þess að venjulega AB valið mun einnig velja listatriðin inni í hreinu óskráðu listanum
ul > li {background: black;color: white;}Þetta er mjög gott val fyrir þegar þú vilt stilla ákveðna tengil á annan hátt, hvað sem er í tilvitnunum verður passað við href á tengilinn. Til dæmis til að stilla alla tengla á Facebook með lit bláum sem þú myndir nota:
a[href*="facebook"] {color: blue;}Það er einnig útgáfa án þess að * sem passar nákvæmlega vefslóðina sem þú getur notað til að fá nákvæmar tenglar.
Þetta val ef það er sérstaklega gagnlegt vegna þess að það er neitunarákvæði sem gerir þér kleift að velja hvaða hópa þætti sem passa ekki við það sem þú setur í B. Ef þú vilt velja alla Div nema fótinn sem þú þarft bara:
div:not(.footer) {margin-bottom: 40px;}Fyrsta barnið og síðasta barnið leyfa okkur að velja fyrsta og síðasta barn foreldrahlutans. Þetta getur verið mikil hjálp þegar kemur að því að skrá atriði og fjarlægja framlegðina - hægri eða landamæri. Til að fjarlægja landamærin í fyrsta listalistanum og framlegðin í síðasta listalistanum sem þú þarft:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Nth-barnið er einföld leið fyrir þig að velja hvaða barn einingar eru í boði. Ef þú vilt td þriðja listann í óflokkaðri listi myndi þetta vera leiðin til að fara:
ul li:nth-child(3) {background: #ccc;}Við getum notað nth-barn til að velja hvert margfeldi margfeldis með því að nota breytu n, til dæmis ef við setjum 3n þá myndi það velja lista atriði númer 3, 6, 9, 12 og svo framvegis.
Síðasti barnið virkar eins og nth barnið en í stað þess að telja mynd fyrsta listann byrjar það að telja frá síðasta, þannig að ef þú notar það með númerinu tveimur mun það velja listann sem kemur fyrir síðasta og notkun hennar er bara eins og nth-barn val:
ul li:nth-last-child(2) {background: #ccc;}Þessi valbúnaður gerir nákvæmlega það sem þú heldur að það gerist; það sér hvaða tegund af frumefni þú settir á það og það velur til dæmis þriðja þáttinn á síðunni þinni sem passar við það sem þú skrifaðir. Til að velja þriðja málsgrein í div sem þú myndir nota:
div p:nth-of-type(3) {font-style: italic;}Hefurðu alltaf tekið eftir því að þegar þú leitar að einhverju á google eru síðurnar sem þú hefur þegar séð birtast í mismunandi litum? Það er einmitt það sem heimsótt er. Þetta er frábært viðbót fyrir notendur en það er stundum gleymt og reynsla mín kemur sér vel í hvert skipti sem ég leita á google.
a:visited {color: blue;}Í minni reynslu með því að nota þessar tegundir af selectors þegar kóðun getur sparað okkur mikinn tíma og forðast einnig þörfina fyrir mikið af klúbbnum sem hylja upp merkið okkar. Og þetta er bara upphafið af CSS selectors, það eru nóg fleiri selectors sem eru mjög vel en stundum gleymt.
Notarðu CSS-vali í stílblöðunum þínum? Er auðveldara að falla aftur á auðkenni og kennslustundir? Láttu okkur vita í athugasemdunum.