[CSS / DIV] Išanalizuokite keturių pagrindinių CSS atributų reikšmių parinkiklių naudojimą

Šis straipsnis jums tai aprašysCSS ypatybės reikšmės parinkiklisAtributų parinkiklio formatas yra elementas, po kurio seka skliausteliai, su atributais skliausteliuose arba atributų išraiškos (nežinau, ar aprašymas teisingas, pačių sukurti žodžiai), pvz., h1[title], h1[title="logo"] ir kt., Tikiu, kad šiame straipsnyje daug sužinosite.

CSS pamoka: CSS atributo vertės parinkiklis

CSS AttributeSelectors, galbūt jūs neturėtumėte būti nesusipažinę su atributų selektoriai, iš esmės, id ir klasės selektoriai iš tikrųjų atributų vertės selektoriai, tiesiog pasirinkite id arba klasės reikšmę.

Atributų parinkiklio formatas yra elementas, po kurio seka skliausteliai, su atributais skliausteliuose, arba atributų išraiškos (nežinau, ar aprašymas teisingas, pačių sukurti žodžiai), pvz., h1[title], h1[title="Logo"] ir t.t., žemiau galite pamatyti 4 konkrečias formas iš mano aptarimo.

1. Paprastas CSS atributo vertės parinkiklis

Nepriklausomai nuo pavadinimo, tai yra paprasto atributų parinkiklio charakteristika.

h1[klasė]{spalva:sidabras; veiks bet kurį H1 elementą su klase, nepriklausomai nuo klasės vertės. Todėl<h1class="hoopla">Sveiki</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> ši taisyklė paveiks h1 of Fooling</h1>.

Žinoma, ši "savybė" nėra tik klasė ar id, bet gali būti visos teisėtos elemento savybės, pvz., img alt, pvz., img[alt]{cssdeclarationshere; Bus taikoma bet kuriam img elementui su atributu alt. Tada a[href][title]{font-weight:bold; O kaip }? Kaip žinote, tai veikia su elementais, turinčiais tiek href, tiek title atributus, pvz., <atitle="W3CHome">W3C</a>.

2. Tikslus CSS atributo vertės parinkiklis

id ir klasė iš esmės yra tikslūs atributų reikšmių selektoriai, taip, h1#logo yra lygus h1[id="logo"]. Kaip minėta anksčiau, mes neapsiribojame id ar klase, galime naudoti bet kokią savybę! Pavyzdžiui, a[][title="W3CHome"]{font-size:200%; } bus taikomas <atitle="W3CHome">W3C</a>.

3. Kai kurie CSS atributų vertės parinkikliai

Kaip rodo pavadinimas, tol, kol atributo reikšmė iš dalies sutampa (šiuo atveju dalis, kuri iš tikrųjų atitinka visą žodį), veiks elementą. Pažvelkime į pavyzdį:

Bet kuris iš jų gali padaryti p šriftą paryškintas.

Šis selektorius yra labai naudingas, pavyzdžiui, jei norite stilizuoti iliustraciją su eilute "Paveikslėlis" pavadinime, pvz., title="Pav.5:xxx aprašymas", galite naudoti img[title~="Paveikslėlis"].

Reikėtų pažymėti, kad, kaip pabrėžiau pirmame sakinyje, reikia atitikti visą žodį, o img[title~="Figure"] nesutaps title="Figure5:xxx description".

Be to, aš padariau nedidelį testą, pavyzdyje pakeičiate "Paveikslėlis" į "Iliustracija", o img[title~="Paveikslėlis"] pakeičiate į img[title~="Iliustracija"], ir jis vis tiek sutampa Firefox, nepriklausomai nuo to, ar kodavimas yra GB2312 ar UTF-8. Atrodo, kad CSS palaikymas kinų kalbai nėra blogas.

4. Specialus CSS atributo vertės parinkiklis

Keista, šis selektorius. Tai veikia taip, na, lengviau pateikti pavyzdį, nei jį apibūdinti.

*[lang|="en"]{color:white; Ši taisyklė pasirinks atributo lang reikšmę arba elementą, prasidedantį en-. Tai yra, jis gali atitikti <h1lang="en">Sveiki!</h1>, <plang="en-us">Sveikinimai!</p>ir <divlang="en-au">G'day!</div>ir nesutampa<plang="fr">Bonjour!</p>ir <h3lang="cy-en">Jrooana!</h3>.