CSS korkeatasoinen lauseke

Valitsinten ryhmittely

Voit ryhmitellä valitsimet, jolloin ryhmitellyt valitsimet voivat jakaa samat lausunnot. Erota ryhmitellyt valitsimet pilkulla. Esimerkissä olemme ryhmitelleet kaikki otsikelementit. Kaikki otsikelementit ovat vihreitä.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Perintä ja sen ongelmat

CSS:n mukaan lapsielementit perivät ominaisuudet isältään. Mutta se ei aina toimi tällä tavalla. Tarkastele seuraavaa sääntöä:

body {
     font-family: Verdana, sans-serif;
     }

Tämän säännön mukaan verkkosivuston body-elementti käyttää Verdana-fonttia (jos käyttäjän järjestelmässä on kyseinen fontti).

CSS:ää perivänä, lapsielementit perivät ylin elementin (tässä tapauksessa body) ominaisuudet (nämä lapsielementit ovat p, td, ul, ol, ul, li, dl, dt ja dd). Ei tarvita muita sääntöjä, kaikki body:n lapsielementit tulisi näyttää Verdana-fonttia, ja lapsielementtien lapsielementit myös.

Mutta siihen asti, kunnes selaintaistelu oli verinen, tämä ei välttämättä tapahtunut, sillä tuon ajan standardien tuki ei ollut yritysten ensisijainen valinta. Esimerkiksi Netscape 4 ei tue perintää, se ei vain sivuuta perintää, vaan myös sivuuttaa sovellettavat säännöt body-elementille. IE/Windows:issa oli vastaavia ongelmia aina IE6:een asti, ja taulukon sisällä olevat fonttityylit jätettiin huomiotta. Miten meidän pitäisi toimia?

Ystävällinen kohtelu Netscape 4:lle

Onneksi voit käsitellä vanhojen selaimien, joita emme voi kutsua "Netscape 4 kohtelias"-säännön avulla, jotka eivät ymmärrä perinnää, käyttämällä ylikorostettua sääntöä.

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

4.0 selaimet eivät voi ymmärtää perimistä, mutta ne voivat ymmärtää ryhmävalitsimet. Tämä voi olla hieman turhaa käyttäjien kaistaa, mutta jos on tarpeen tukea Netscape 4 käyttäjiä, tämä on tehtävä.

Onko periminen проклятием?

Jos et halua "Verdana, sans-serif"-kirjasinta perimään kaikkia alisubjekteja, mitä sinun pitäisi tehdä? Esimerkiksi, jos haluat kappaleen kirjasinnksi Times. Ei ongelmaa. Luo erityinen sääntö p:lle, niin se irrotetaan isäntäsäännöistä:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }