CSS id-valitsimen yksityiskohtaiset tiedot

ID-valitsin mahdollistaa tyylien määrittämisen riippumatta dokumentin elementeistä.

CSS ID-valitsin

Tietyllä tavalla ID-valitsimet muistuttavat luokan valitsimia, mutta niillä on myös tärkeitä eroja.

Syntaksi

Ensinnäkin, ID-valitsimen edessä on #-merkki - myös sanana ruudukko tai pystysuora numero.

Tarkastele seuraavaa sääntöä:

*#intro {font-weight:bold;}

Kuten luokan valitsimissa, ID-valitsimissa voidaan ohittaa tähtivalitsimet. Edellinen esimerkki voidaan kirjoittaa myös seuraavasti:

#intro {font-weight:bold;}

Valitsimen vaikutus on sama.

Toinen ero on, että ID-valitsin ei viittaa class-ominaisuuden arvoon, vaan epäilemättä se viittaa id-ominaisuuden arvoon.

Tässä on esimerkki todellisesta ID-valitsimesta:

<p id="intro">Tämä on esittelyluku.</p>

Kokeile itse

Luokan valitsin vai ID-valitsin?

Olemme käsitelleet luokan valitsimia tässä luvussa, ja voimme määritellä luokan jopa useille elementeille. Edellisessä luvussa luokan nimi important on sovellettu p- ja h1-elementteihin, ja sitä voidaan soveltaa myös muihin elementteihin.

Ero 1: Voidaan käyttää vain kerran dokumentissa

Eri kuin luokka, ID-valitsin käytetään kerran HTML-dokumentissa ja vain kerran.

Ero 2: ID-sanalista ei voida käyttää

Eri kuin luokan valitsimet, ID-valitsimet ei voi käyttää yhdessä, koska ID-ominaisuus ei salli välilyönnillä erotettua sanalistan.

Ero 3: ID voi sisältää enemmän merkityksiä

Samankaltainen kuin luokka, ID voidaan valita riippumatta elementistä. Joissakin tapauksissa tiedät, että tietty ID-arvo ilmestyy dokumentissa, mutta et tiedä, mikä elementti se on, joten haluat määritellä riippumattoman ID-valitsimen. Esimerkiksi, tiedät, että annetussa dokumentissa on ID-arvo mostImportant elementti. Et tiedä, onko tämä tärkein asia kappale, lyhyt lause, luettelo tai alakohde. Tiedät vain, että jokaisessa dokumentissa on tällainen tärkeä sisältö, joka voi olla millä tahansa elementillä ja ilmestyy vain kerran. Tässä tapauksessa voit kirjoittaa seuraavan säännön:

#mostImportant {color:red; background:yellow;}

Tämä sääntö sopii seuraaviin elementteihin (nämä elementit eivät voi olla samassa dokumentissa samanaikaisesti, koska niillä on samat ID-arvot):

<h1 id="mostImportant">Tämä on tärkeää!
<em id="mostImportant">Tämä on tärkeää!
<ul id="mostImportant">Tämä on tärkeää!</ul>

Kokeile itse:

Erottelu

Huomaa, että luokka- ja ID-valitsimet voivat olla erottelullisia. Tämä riippuu asiakirjan kielestä. HTML ja XHTML määrittelevät luokat ja ID-arvot erottelullisiksi, joten luokka- ja ID-arvojen iskuaisuuden on vastattava asiakirjassa olevia arvoja.

Siksi seuraava CSS ja HTML eivät muuta elementtiä粗体:

#intro {font-weight:bold;}
<p id="Intro">Tämä on esittelyluku.</p>

Koska kirjain i:n iskuaisuus on erilainen, valitsimet eivät täsmää yllä oleviin elementteihin.