CSS luokka-valitsimen yksityiskohtaiset selitykset

Luokan valitsin mahdollistaa tyylejä määrittämisen riippumatta asiakirjan elementeistä.

CSS luokka-valitsimet

Luokan valitsin mahdollistaa tyylejä määrittämisen riippumatta asiakirjan elementeistä.

Tämä valitsin voidaan käyttää yksinään tai yhdessä muiden elementtien kanssa.

Vinkki:Nämä valitsimet voidaan käyttää vain sopivasti merkityn asiakirjan jälkeen, joten näiden valitsinten käyttö edellyttää yleensä ensin joitakin suunnitelmia ja suunnitelmia.

Yleisin tapa soveltaa tyylejä elementteihin, joista ei ole suoraa tietoa, on käyttää luokan valitsinta.

Muuta HTML-koodia

Ennen kuin luokan valitsinta käytetään, on muutettava tiettyä asiakirjamerkintää, jotta luokan valitsin toimisi oikein.

Jotta luokan valitsimen tyylin ja elementin välille voidaan luoda yhteys, luokan arvon on määriteltävä sopivaksi. Katso seuraava HTML-koodi:

<h1 class="important">
Tämä otsikko on erittäin tärkeä.
</h1>
<p class="important">
Tämä kappale on erittäin tärkeä.
</p>

Tässä koodissa kaksi elementin luokka määritellään tärkeäksi: ensimmäinen otsikko (h1-elementti) ja toinen kappale (p-elementti).

Syntaksi

Sitten käytämme seuraavaa syntaksia näiden luokittujen elementtien tyyleihin soveltamiseen，eli luokan eteen tulee piste (.), ja sitten yhdistetään jokaiselle valitsijalle：

*.tärkeä {color:red;}

Jos haluat valita vain saman nimiset elementit，voit sivuuttaa jokaisen valitsimen ja se ei vaikuta mitään haitallisesti：

.tärkeä {color:red;}

Kokeile itse

Yhdistettynä elementti-valitsimiin

Luokkavalitsimet voidaan käyttää yhdessä elementti-valitsimien kanssa.

Esimerkiksi，voit haluta, että vain kappaleet näkyvät punaisena tekstinä：

p.tärkeä {color:red;}

Valitsin tämä päivämäärä matchaa kaikki p-elementit, joissa on class 'tärkeä'，mutta muiden tyyppiset elementit eivät matchaa, riippumatta siitä, onko kyseessä class-ominaisuus. Valitsin p.tärkeä tarkoittaa: 'kaikki p-elementit, joissa on class-arvo important'。 Koska h1-elementti ei ole kappale，tämä sääntö ei sovellu valitsimeen，joten h1-elementti ei muutu punaiseksi tekstinä.

Jos todella haluat määrittää eri tyylit h1-elementille，voit käyttää valitsinta h1.tärkeä：

p.tärkeä {color:red;}
h1.tärkeä {color:blue;}

Kokeile itse

CSS moniluokkavalitsimet

Edellisessä luvussa käsittelemme tilannetta, jossa class-arvossa on yksi sana. HTML:ssä class-arvossa voi olla sana-lista, joissa sanat ovat erotettu välilyönnillä. Esimerkiksi，jos haluat merkitä tietyn elementin sekä tärkeänä että varoituksena，voit kirjoittaa seuraavasti：

<p class="tärkeä varoitus">
Tämä kappale on erittäin tärkeä varoitus.
</p>

Näiden sanausten järjestys ei ole tärkeää，voit kirjoittaa myös warning tärkeä.

Oletamme, että kaikki luokkana olevat elementit, joissa on class 'tärkeä', ovat粗体，而所有 class 'varoitus' omaavat elementit ovat kursiivisia，同时包含 'tärkeä' ja 'varoitus' kaikissa elementeissä on hopeinen tausta. Voit kirjoittaa sen seuraavasti：

.tärkeä {font-weight:bold;}
.varoitus {font-style:italic;}
.tärkeä.varoitus {background:silver;}

Kokeile itse

Yhdistämällä kaksi luokkavalitsinta yhteen, voit valita vainSamaan aikaan sisältävät nämä luokatelementeille (luokkien järjestys ei ole merkitystä).

Jos monilukuinen valitsin sisältää luettelossa ei ole olevan luokan nimen, sopivuus epäonnistuu. Katso seuraavat säännöt:

.important.urgent {background:silver;}

Odottaaankin, että tämä valitsin sopii vain p-elementeille, joissa class-ominaisuudessa on sanat important ja urgent. Siksi, jos p-elementin class-ominaisuudessa on vain sanat important ja warning, se ei sopi. Mutta se sopii seuraaviin elementteihin:

<p class="important urgent warning">
Tämä kappale on erittäin tärkeä ja kiireellinen varoitus.
</p>

Kokeile itse

Tärkeä asia:Ennen IE7:n versioita eri alustojen Internet Explorer ei voi käsitellä oikein useita luokka-valitsimia.