Yleisvalitsin. CSS-yleisvalitsin

Kotiin / Windows 7

Hei, rakkaat blogisivuston lukijat. Tänään jatkamme omamme täyttämistä materiaaleilla ja alamme puhua sellaisesta perustavanlaatuisesta asiasta kuin CSS-kielen valitsimet.

Niitä on seitsemän tyyppiä - tag, class, Id, universaali, attribuutit sekä pseudo-luokat ja pseudoelementit. Vähän paljon, eikö? No, ei välitä, analysoidaan niitä kaikkia hitaasti ja käytämme yksityiskohtaisia ​​esimerkkejä.

Aiemmissa julkaisuissa olemme jo tarkastelleet , ja myös tutustuneet kokoyksiköihin, kuten ja oppineet CSS:n periytymisperiaatteista. No, tänään, kuten sanoin, avaamme erittäin vakavan luvun tyylinkuvauskielen tutkimuksessa.

Tagien ja luokan valitsimet CSS:ssä

Ennen tyylisääntöjen opiskelua sinun on opittava, miten ja minkä periaatteiden mukaan asetetaan ne tunnisteet, joiden avulla selain ymmärtää, mihin HTML-koodin elementteihin niitä tulee soveltaa. Valitsijat ovat erilaisia. Ymmärtämisen kannalta yksinkertaisimmissa käytetään tagin nimiä, joihin tulee soveltaa niiden jälkeen kirjoitettuja CSS-kielen sääntöjä.

Tässä esimerkissä kaikki kappaleen P-tunnisteet käyttävät punaista kirjasinväriä ja harmaata taustatäyttöväriä. Jokaisella CSS-säännöllä voi olla useita valitsimia määritettynä kerralla. Miten niitä pitäisi lukea? Aina oikealta vasemmalle, eli aloita siitä, joka on lähinnä avattavaa kiharaa aaltosulkeen.

Yllä olevassa esimerkissä ensimmäisellä rivillä näkyy tunnisteen (elementin) valitsin, joka pakottaa fontin värin punaiseksi kaikissa Div-säilöissä.

Tavallisen Div-säiliön sisältö

Toisella rivillä näemme esimerkin monimutkaisesta valitsimesta, jossa meillä on uusi elementti, kuten luokkaa. Se on rekisteröity nimellä . Voimme käyttää luokan arvona mielivaltaista nimeä käyttämällä symboleja ,,,[_],[-].

Mutta luokan lisäksi tyylinkuvauskieli käyttää myös Id:tä. Mitä eroa on luokan ja tunnuksen välillä? Jälkimmäisen arvon on oltava ainutlaatuinen, koska Id on yksilöllinen tunniste HTML-tunnisteelle ja sen nimeä (arvoa) voidaan käyttää vain kerran koodissa.

Ja luokan arvo ei ole ainutlaatuinen ja sitä voidaan käyttää mihin tahansa suuri määrä koodin elementtejä. Ne. eri tunnisteilla (Div, P, H1 jne.) voi olla sama arvo luokkaattribuutilleen:

Miten sitä käytetään CSS-valitsimissa? Osoittautuu, että hänen nimensä on kirjoitettu pisteellä edessä.

Siksi, kun näemme CSS-koodissa jotain, joka alkaa pisteellä, ymmärrämme heti, että puhumme luokasta. Jos katsomme kuvakaappauksessa annettua esimerkkiä, nyt kaikissa HTML-koodin elementeissä, joissa kirjoitetaan "luokka" arvolla "Blue", teksti on väritetty siniseksi.

Mutta tämä ei tapahdu ollenkaan, koska valitsimme luokan nimeksi "Blue". Voisimme kutsua sitä miksi tahansa (jopa "xyz"), ja esimerkissämme väri on asetettu täsmälleen sellaiseksi kuin se on määritetty tämän luokan valitsimelle. Toivottavasti tämä on selvä? Muutetaan esimerkin luokan nimi (arvo):

Kappale tekstillä

Kappale tekstillä

Ne. Nyt meillä on luokka XYZ ja sille kirjoitettu sääntö:

Xyz (väri: sininen)

Väritä kappaleteksti siniseksi. Tämä esimerkki korostaa sitä jälleen kerran luokkaattribuutin nimi voit käyttää mitä tahansa. Jatketaan kuitenkin.

Katsotaanpa vielä esimerkkiä siitä, kuinka tunnisteen ja luokan valitsimia käytetään CSS:ssä. Kuvitellaan, että meillä on seuraavat tyylisäännöt:

Div (väri: punainen) div.a123 (väri: vihreä) .xyz (väri: sininen)

Kuvitellaan myös, että HTML-koodissa on seuraavat elementit:

Määritetyille valitsimille asetettujen sääntöjen mukaisesti annettujen HTML-koodielementtien sisällön tulisi näyttää tältä:

Katsotaan nyt, miksi selain tulkitsi näiden HTML-koodielementtien tyylin tällä tavalla. Ensimmäiselle Div-säilölle, jossa ei ole määritetty luokkaa, sovelletaan kaikkiin säilöihin sovellettavaa CSS-sääntöä: div (väri: punainen). Tämän seurauksena sen sisältö värjäytyy punaiseksi. Sehän piti näyttää.

Toisen Div:n tagissa meillä on luokka "a123". Tässä tapauksessa sovelletaan "div.a123" -kohtaa vastaavia CSS-sääntöjä (koska meillä on vain Div-tunniste, johon on kirjoitettu class="a123"-attribuutti). Siksi toisen säiliön sisältö on vihreä.

Mutta luultavasti huomasit, että voit myös soveltaa ensimmäistä CSS-sääntöä "div (väri: punainen)" toiseen Diviin, koska se on tarkoitettu kaikille konteille poikkeuksetta. Tästä seuraa ristiriita, joka voidaan ratkaista CSS:ssä ottamalla käyttöön konsepti.

Puhumme tästä yksityiskohtaisesti hieman myöhemmin, mutta toistaiseksi sanon vain, että "div.a123":n prioriteetti (toiselle Diville tarkasteltavassa esimerkissä) on korkeampi.

Muuten, samanlainen tilanne syntyy esimerkkimme kolmannen Divin kanssa. Sille on kaksi vaihtoehtoa: "div"-tunnisteen valitsin ja ".xyz"-luokan valitsin. Jälleen syistä, joita en ole vielä selittänyt (lue tästä yllä olevasta linkistä), jälkimmäisen prioriteetti on korkeampi, joten kolmannen säiliön sisältö värjätään siniseksi.

Jatketaan. Yllä olevassa esimerkissä meillä on kappaletunniste P, joka sisältää class="a123". Osoittautuu, että tämä elementti ei kuulu mihinkään kolmesta määrittämästämme valitsimesta (kaikilta kolmelta se puuttui).

Sillä on vain leikkaus toisen vaihtoehdon kanssa, mutta tätä valitsinta käytetään vain "Div"-tunnisteille, joiden luokka on "a123", eikä kappaletunnisteelle P. Tämän seurauksena tämän kappaleen tekstin väri pysyy oletusarvona. , eli musta.

Seuraavaksi esimerkissä meillä on kappaleelementti, jossa on class="xyz". Sitä sovelletaan uusin css sääntö ".xyz (väri:sininen)". Siksi tämän kappaleen teksti värjätään siniseksi. Täällä kaikki on mielestäni selvää.

Yleisvalitsin ja yksilöllinen tunnus

Siirrytään nyt jo mainitsemiini tunnuksiin. Kun näemme jotain CSS-koodissa hash edessä, tämä tarkoittaa, että kyseessä on Id:

Yleensä tämä valitsin on kirjoitettu tagia mainitsematta, johon se viittaa (ensimmäinen vaihtoehto juuri yllä annetussa esimerkissä), vaikka toinen kirjoitustapa on myös hyväksyttävä, mutta sitä käytetään harvoin. Tämä johtuu siitä, että Id-attribuutin arvo koodissa on yksilöllinen, mikä tarkoittaa, että kahdella elementillä ei voi olla samat Id-arvot. Ne. on turha selventää, vaikka se ei ole kiellettyä.

Siksi he yleensä yksinkertaisesti kirjoittavat tiivisteen (hash), jota seuraa välittömästi Id-attribuutin arvo (nimi). Oletetaan, että meillä on seuraava sääntö tunnukselle:

#selkä (väri:punainen)

ja koodi sisältää seuraavan fragmentin:

jonka selain tulkitsee seuraavasti:

Div-säiliö ainutlaatuisella tunnuksella

CSS tarjoaa myös tähdellä merkitty yleisvalitsin, mikä sen osoittaa tämä sääntö koskee yleisesti mitä tahansa koodin elementtiä:

* (väri: musta)

Tässä tapauksessa minkä tahansa tunnisteen sisällä oleva teksti on musta (oletusväri). On selvää, että kaikilla muilla valitsimilla (tunnisteet, luokat ja Id) on korkeampi prioriteetti kuin yleisellä valitsimella.

Attribuuttien valitsijat ja niiden tulevaisuus nykyaikaisessa CSS:ssä

Kaikki yllä kuvatut vaihtoehdot (tunniste, luokka, tunnus ja universaali) toimivat ehdottomasti kaikissa selaimissa. Mutta on muitakin vaihtoehtoja, jotka eivät toimi kaikkialla.

Tämä tyyppi sisältää attribuuttivalitsimia, jotka ovat erittäin käteviä ja joiden avulla voit merkittävästi laajentaa ja samalla yksinkertaistaa mahdollisuuksia kohdennettuun vaikuttamiseen, mutta jotka valitettavasti kaikki selaimet eivät tue niitä täysin.

Kuten luultavasti muistat, HTML-kielessä tunnisteiden sisällä voimme käyttää erilaisia ​​attribuutteja, joiden avulla voimme antaa tiettyjä ominaisuuksia itse näiden elementtien sisällölle. Siksi olisi loogista käyttää paitsi tagien nimiä myös attribuuttien nimiä valitsimina CSS-kielessä.

Itse asiassa teimme tämän jo, kun tarkastelimme luokkaa ja tunnusta, koska ne olivat pohjimmiltaan joidenkin tunnisteiden attribuutteja. Tunnus ja luokka ovat vain erittäin tärkeitä asettelussa, ja ne laitettiin erillisiin ryhmiin, jokaisella on oma syntaksi.

Kuinka käyttää muita kielessä olevia valitsimia? HTML-attribuutit(ei ID eikä luokka)? Melko yksinkertainen - laita ne hakasulkeisiin:

(väri: vihreä)

Nyt kaikilla HTML-koodin tunnisteilla, joihin on kirjoitettu "otsikko", tekstin väri on vihreä.

Erittäin kätevä mielestäni. Mutta koko ongelma attribuuttivalitsimien käytössä on se ne eivät toimi IE 6:ssa ja sitä vanhemmissa versioissa yleensä tai ne toimivat, mutta vain osittain. Ennen kuin Internet IE 6:lla käyttävien käyttäjien prosenttiosuus on nolla, tämä kätevä menetelmä ei todennäköisesti tule yleistymään asettelussa. Mutta silti sinun on tiedettävä niiden olemassaolo ja osattava käyttää niitä.

Kuten esimerkistä näet, ei ole väliä, onko valitsimessa määritetyllä attribuutilla jokin arvo vai onko se tyhjä. Mutta se ei ole kaikki, mitä voit tehdä sillä, koska se on vain laulu.

Voit ilmoittaa niissä ei vain määritteen nimi, vaan myös sen merkitys:

(väri: vihreä)

Tämän seurauksena tällaiselle valitsimelle määritettyjä CSS-sääntöjä sovelletaan vain tagiin, jonka "title" arvo on "First Chapter" (esimerkissämme tämä on toinen rivi):

Kuvattu esimerkki oli tiukka tasa-arvo, mutta voit kirjoittaa tämän valitsimen seuraavasti:

(väri: vihreä)

Että. Tämä CSS-sääntö koskee vain niitä HTML-koodielementtejä, joiden "otsikko" sisältää sanan "kappale" (esimerkissämme tämä on toinen ja kolmas rivi):

Attribuutin valitsimen syntaksi tulkitsee «~=» kuin "koko sana sisältyy". Esimerkiksi elementille, jossa on title="Second paragraph" CSS правило «color:green» уже применяться не будет.!}

Mutta voit laittaa sen tilalle «*=» ja sitten ei vain oteta huomioon valitsimessa määritettyjä yksittäisiä sanoja, vaan myös sanojen osia (mitä tahansa tekstiä, joka sisältyy missä tahansa määritteessä):

(väri: vihreä)

Tässä tapauksessa ja elementille, jossa on title="Second kappale" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (kaikki, mikä alkaa suluissa määritetyllä arvolla), mikä auttaa luomaan seuraavanlaisen attribuuttivalitsimen:

(väri: punainen)

Muistat varmaan, että määritteen määritteen . Eli melko usein verkkosivuston sisäiset linkit tehdään suhteelliseksi, mutta ulkoisista linkeistä ei voi tehdä millään muulla tavalla kuin tehdä niistä absoluuttisia.

Siksi kaikki ulkoisia linkkejä alkaa "http", ja sisäiset voidaan määrittää suhteellisessa muodossa ilman "http" käyttöä. Että. Esimerkissämme määritetty valitsin sallii väritä kaikki sivuston ulkoiset linkit(kaikki absoluuttiset) punaisena. No, suhteelliset värit, jotka eivät sisällä "http", pysyvät oletusarvoisesti värinä, joka niille otettiin käyttöön. Minusta se on hienoa!!!

Kuten näette, attribuuttivalitsimet antavat meille paljon mahdollisuuksia ja se, että niitä ei vielä käytetä laajalti, on erittäin köyhän ja loukkaantuneen Melkosoft-yrityksen ansio ja erityisesti heidän ideansa IE 6. Mutta pikkuhiljaa he alkavat käytettäväksi CSS:ssä, ja pian ne tietysti pääsevät elämään.

Kyllä, on toinenkin operaattori «$=» - kaikki, mikä päättyy lainausmerkeissä määritettyyn arvoon:

(väri: vihreä)

Tämän seurauksena ensimmäinen ja kolmas rivi ensimmäisestä esimerkistämme ovat vihreät, koska sanan "title" merkitys päättyy sanaan "raf". Näin attribuuttien valitsimet toimisivat loistavasti nykyaikaisessa CSS:ssä, jos IE 6 -selainta käyttävistä käyttäjistä ei vielä olisi tietty prosenttiosuus.

Itse asiassa kaikista tyypeistä meillä on vain kaksi harkittavaa: . Mutta haluan siirtää tämän seuraavaan artikkeliin, jossa puhumme myös niiden erilaisista yhdistelmistä.

Onnea sinulle! Nähdään pian blogisivuston sivuilla

Saatat olla kiinnostunut

Pseudoluokkien ja pseudoelementtien valitsimet CSS:ssä (hover, first-child, first line ja muut), suhteet HTML-tunnisteet koodi
Css:n prioriteetit ja niiden kasvu Tärkeä, valitsimien, käyttäjä- ja tekijätyylien yhdistäminen ja ryhmittely
Luettelotyyli (tyyppi, kuva, sijainti) - Css-säännöt mukauttamiseen ulkonäkö listat HTML-koodissa
CSS-tausta (väri, sijainti, kuva, toisto, liite) - kaikki taustan tai taustavärin asettamiseen Html kuvia elementtejä
CSS - mikä se on, kuinka peräkkäiset tyylisivut yhdistetään HTML-koodiin tyylin ja linkin avulla
Mittayksiköt (pikselit, Em ja Ex) ja periytymissäännöt CSS:ssä
Mihin CSS on tarkoitettu, miten CSS-tyylisivut yhdistetään HTML-dokumentti ja tämän kielen perussyntaksi
Täyte, marginaali ja reunus - asetettu sisään CSS sisäinen ja ulkoiset marginaalit sekä kehykset kaikille sivuille (ylä, ala, vasen, oikea) Taulukko-, luettelo- ja muiden rivien vuorottelevan taustavärin määrittäminen HTML-elementtejä verkkosivuilla käyttämällä n:nnen lapsen pseudoluokkaa
Käyttämättömien tyylirivien (ylimääräisten valitsimien) löytäminen ja poistaminen sivustosi CSS-tiedostosta
Näytä (esto, ei mitään, upotettu) CSS:ssä - aseta HTML-elementtien näyttötyyppi verkkosivulla

Valitsin
Yleisvalitsin

CSS-koodin ääriviivat näyttävät tältä:

Valitsija (CSS-ominaisuus: arvo; CSS-ominaisuus: arvo; ... jne.)

Yleisvalitsimessa tähti * toimii valitsimena:

* (CSS-ominaisuus: arvo; CSS-ominaisuus: arvo; ... jne.)

Yleisvalitsin, vaikuttaa kaikkiin HTML-dokumentin tunnisteisiin kerralla.

Voit esimerkiksi poistaa kaikki sisäiset ja ulkoiset sisennykset kaikista HTML-dokumentin tunnisteista:

* ( marginaali: 0; täyte: 0; )

Oletetaan, että meillä on HTML-dokumentti, joka sisältää seuraavan koodin:

Lumileopardisivu

Lumileopardi

seuraavasti.

Asetetaan yleisvalitsimella kaikkien tunnisteiden fontin väri vihreäksi, fontin nimeksi arial ja fontin tyyliksi vino.

Lumileopardisivu

Lumileopardi

Lumileopardi (irbis, ak leopard) on kissaperheeseen kuuluva suuri petoeläin. Se elää vuoristossa Afganistanissa, Burmassa, Bhutanissa, Intiassa, Kazakstanissa, Kirgisiassa, Kiinassa, Mongoliassa, Nepalissa, Pakistanissa, Venäjällä, Tadžikistanissa ja Uzbekistanissa. Lumileopardi on ohut, pitkä, joustava runko, suhteellisen lyhyet jalat, pieni pää ja erittäin pitkä häntä.

Lumileopardin pituus hännän kanssa on 200-230 cm, paino jopa 55 kg.

Turkin väri on vaalea, savunharmaa, jossa on rengasmaisia ​​tai kiinteitä tummia pilkkuja.

Lumileopardi metsästää pääasiassa vuoristovuohia ja lampaita. Lajien elinympäristön saavuttamattomuuden vuoksi lumileopardeja on edelleen vähän tutkittu. Karkeiden arvioiden mukaan niiden lukumäärä vaihtelee kuitenkin noin 10 tuhannen yksilön välillä. Vuodesta 2013 lähtien lumileopardien metsästys on kielletty kaikkialla. Selaimessa oleva sivu näyttää tältä. Voit myös kokeilla

Joskus verkkosivustoa luotaessa on välttämätöntä soveltaa tiettyä tyyliä kaikkiin sivulla esiintyviin elementteihin poikkeuksetta. Tämän tehtävän toteuttamiseen käytetään yleisvalitsinta.

Kuvaus

Se on merkitty symbolilla “*”. Sen avulla voit valita kaikki sivulla olevat tagit kerralla ilman, että sinun tarvitsee tehdä muutoksia niiden tarkoitukseen ja sisäkkäisyyksiin. Esimerkiksi:

* (fonttikoko: 18px;)

Tämän merkinnän avulla asetamme kaikki tekstiä sisältävät elementit fonttikorkeudeksi 18 pikseliä.

Katsotaanpa sitä tarkemmin. Ennen CSS:n versiota 2 ei ollut yleisvalitsinta. Se vastaa kaikkia elementtejä, joten sen määrittämiä tyylejä sovelletaan niihin samanaikaisesti. Sinun tulee olla erittäin varovainen käyttäessäsi tätä valitsinta. Varovaisuutta aiheuttavat mahdolliset vaikeudet tyylejä periessään, tai pikemminkin niiden arvaamaton käyttäytyminen.

On myös syytä huomata, että käyttämällä luokkaa, tunnistetta, attribuuttia voit ohittaa yleisvalitsimen ilman haittaa. Esimerkiksi:

*. vasen (reunus: 1px kiinteä #000; ) . vasen (reunus: 1px kiinteä #000; )

Näillä tietueilla on sama semanttinen kuorma, ja tyyliä sovelletaan samalla tavalla sekä yleisvalitsimen kanssa että ilman sitä.

Missä sitä voidaan käyttää?

Pohjimmiltaan yleinen valitsin löytyy käytännössä nollattaessa oletusselaimen tyylejä. Esimerkiksi sisennykset, kirjasinkoot ja niin edelleen.

Vaikka tämä menetelmä on yksinkertainen ja myös merkittävästi lyhentää koodin pituutta, sillä on useita haittoja.

Yleisvalitsimen haitat nollattaessa vakiotyylejä:

  • joitakin tyylejä ei voi nollata
  • täyttöä ei voi nollata
  • voi "tappaa" tavallisen painikkeen ulkonäön useimmissa selaimissa
  • Mozila-selain toimii pienten vikojen kanssa
  • hidastaa merkittävästi sivujen lataamista Mozilassa (tämä koskee kuitenkin vain sivustoja, joissa CSS on yli tuhat riviä, muuten viive on huomaamaton.)

Yllä kuvatuista syistä on suositeltavaa nollata tyylit elementtikohtaisesti käyttämällä tyyppivalitsinta. Lopussa on esimerkki samanlaisesta koodista tyylien nollausta varten

Joskus sinun on asetettava yksi tyyli verkkosivun kaikille elementeille samanaikaisesti, esimerkiksi kirjasin- tai tekstityyli. Tässä tapauksessa universaali valitsin, joka vastaa mitä tahansa verkkosivun elementtiä, auttaa.

CSS3:ssa yleisvalitsinta käytetään myös yhdessä nimitilan kanssa.

  • ns|* - kaikki ns-nimiavaruuden elementit.
  • *|* - kaikki elementit kaikissa nimitiloissa.
  • |* - kaikki elementit ilman nimenomaista nimiavaruutta.

Syntaksi

* (Tyylisääntöjen kuvaus)

Tähtisymboli (*) tarkoittaa yleisvalitsinta. Joissakin tapauksissa ei ole tarpeen määrittää yleisvalitsinta. Joten esimerkiksi *.class- ja .class-merkinnät ovat identtisiä tuloksissaan.

Nimitykset

KuvausEsimerkki
<тип> Ilmaisee arvon tyypin.<размер>
A && BArvot on annettava määritetyssä järjestyksessä.<размер> && <цвет>
A | BIlmaisee, että sinun on valittava vain yksi arvo ehdotetuista arvoista (A tai B).normaali | pienet kirjaimet
A || BJokaista arvoa voidaan käyttää itsenäisesti tai yhdessä muiden kanssa missä tahansa järjestyksessä.leveys || laskea
Ryhmien arvot.[ sato || risti ]
* Toista nolla tai useampia kertoja.[,<время>]*
+ Toista yksi tai useampia kertoja.<число>+
? Määritetty tyyppi, sana tai ryhmä on valinnainen.upotettu?
(A, B)Toista vähintään A, mutta enintään B kertaa.<радиус>{1,4}
# Toista yksi tai useampi kertaa pilkuilla erotettuina.<время>#
×

Esimerkki

Yleisvalitsin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Huom

Selain Internet Explorer kuudenteen versioon asti, ymmärtää * html -rakenteen, mikä on epäloogista, koska tag on ylätason tunniste, eikä sen yläpuolella voi olla elementtejä. Tätä vikaa käytetään joskus IE6:n tyyliin, esimerkiksi * html body ( ... ) -rakenne lisää tyyliä body-valitsimeen IE6:ssa ja sitä vanhemmissa, eikä se toimi muissa selaimissa.

IN Internet-selain Resurssienhallinnassa 7, kun lisäät yleisvalitsimen ennen valitsimen nimeä ilman välilyöntejä, sitä käsitellään kontekstivalitsimena. Siten *body-merkintä toimii vain IE7:ssä ja muut selaimet ohittavat sen.

Erittely

Jokainen spesifikaatio käy läpi useita hyväksymisvaiheita.

  • Suositus - W3C on hyväksynyt spesifikaation ja sitä suositellaan standardiksi.
  • Ehdokassuositus ( Mahdollinen suositus ) - standardista vastaava ryhmä on tyytyväinen, että se täyttää tavoitteensa, mutta tarvitsee kehitysyhteisön apua standardin toteuttamiseen.
  • Ehdotettu suositus Suositeltu suositus) - tässä vaiheessa asiakirja toimitetaan W3C:n neuvoa-antavalle toimikunnalle lopullista hyväksyntää varten.
  • Working Draft - Kypsempi versio luonnoksesta, josta on keskusteltu ja jota on muutettu yhteisön tarkistamista varten.
  • Toimittajan luonnos ( Toimituksellinen luonnos) - standardin luonnosversio projektin toimittajien tekemien muutosten jälkeen.
  • Luonnos ( Erittelyluonnos) - standardin ensimmäinen luonnos.
×
  • Suoritettava tehtävä on valita kaikki elementit. Itse asiassa kaikki.
  • Nimitys on tähti - *.
  • Käyttöesimerkki:

Palauta pehmusteet oletusarvoiksi kaikille elementeille

Lue lisää yleisvalitsimesta

Esitelty CSS-versiossa 2. Vastaa mitä tahansa elementtiä . Siksi yleisvalitsimelle määritettyjä tyylejä sovelletaan kaikkiin elementteihin kerralla. Tästä syystä suosittelen käyttämään sitä erittäin huolellisesti - tyylien periytyminen voi aiheuttaa ongelmia. Tai pikemminkin käyttäytyminen, joka on tuskin ennakoitavissa (kokemattomalle koodaajalle). Käsittelemme tätä seikkaa yksityiskohtaisemmin perintöä käsittelevässä osiossa.

Toinen asia yleisvalitsimessa on, että kun sitä käytetään yhdessä toisen valitsimen (kuten luokan, tunnisteen tai attribuutin valitsimen) kanssa osana yksinkertaista valitsinta, se voidaan ohittaa rankaisematta. Tämä on suunnilleen sama kuin sanoa sen sijaan, että "kaikki dromedaarit ovat dromedaarikameleja" yksinkertaisesti "dromedaarit ovat dromedaarikameleja". Merkitys ei ole muuttunut.

Esimerkki:

*.error ( väri: punainen; ) .error ( väri: punainen; ) /* nämä kaksi sääntöä ovat samanarvoisia. Yleisvalitsin puuttuu toisessa tapauksessa */

Soveltamisala

Itse asiassa on kätevintä käyttää yleisvalitsinta, kuten ensimmäisessä esimerkissä, nollataksesi tyylien (erityisesti sisennysten) selaimesta riippuvat alkuarvot.

Mutta edes tällainen sovellus ei aina ole hyvä idea. Artikkelissa kuvattujen yleisvalitsimen haittojen vuoksi on parempi käyttää . Eli käytä tyyppivalitsimia.

Näin pääsimme sujuvasti seuraavaan aiheeseen. Olemme ilmeisesti selvittäneet yleisvalitsimen. On aika siirtyä eteenpäin. Seuraava pysäkki -.

© 2024 ermake.ru - Tietoja PC-korjauksesta - Tietoportaali