CSS selektorgropning

Väljargruppering

Anta att du vill att h2-elementet och stycken ska ha grå färg. Det enklaste sättet att uppnå detta är att använda följande deklaration:

h2, p {color:gray;}

Placera h2- och p-väljare till vänster i regeln, sedan använda komma för att separera, så definierar du en regel. Stilen till höger (color:gray;) tillämpas på de element som dessa väljare refererar till. Komman informerar webbläsaren att regeln innehåller två olika väljare. Om denna komma saknas, kommer regeln att ha en helt annan innebörd. Se efterkommande väljare.

Man kan gruppera vilka antal val som helst tillsammans, det finns inga begränsningar.

Till exempel, om du vill visa många element i grått, kan du använda regler som följande:

body, h2, p, table, th, td, pre, strong, em {färg:grå;}

Tips:Genom gruppering kan skaparna komprimera vissa typer av stilar tillsammans, vilket ger en mer kompakt stylatskala.

Följande två reglergrupper ger samma resultat, men det är tydligt att en är lättare att skriva:

/* ingen gruppering */
h1 {färg:blå;}
h2 {färg:blå;}
h3 {färg:blå;}
h4 {färg:blå;}
h5 {färg:blå;}
h6 {färg:blå;}
/* gruppering */
h1, h2, h3, h4, h5, h6 {färg:blå;}

Prova själv

Grupperna erbjuder några intressanta val. Till exempel, alla reglergrupper i följande exempel är ekvivalenta, varje grupp visar bara olika sätt att gruppera val och deklarationer:

/* grupp 1 */
h1 {färg:silver; bakgrund:vit;}
h2 {färg:silver; bakgrund:grå;}
h3 {färg:vit; bakgrund:grå;}
h4 {färg:silver; bakgrund:vit;}
b {färg:grå; bakgrund:vit;}
/* grupp 2 */
h1, h2, h4 {färg:silver;}
h2, h3 {bakgrund:grå;}
h1, h4, b {bakgrund:vit;}
h3 {färg:vit;}
b {färg:grå;}
/* grupp 3 */
h1, h4 {färg:silver; bakgrund:vit;}
h2 {färg:silver;}
h3 {färg:vit;}
h2, h3 {bakgrund:grå;}
b {färg:grå; bakgrund:vit;}

prova själv:

Observera att deklareringsgruppering användes i grupp 3. Vi kommer att berätta mer om deklareringsgruppering senare.

Wildcard-väljare

CSS2 introducerade en ny enkel väljare - wildcard-väljaren (universal selector), som visas som en stjärna (*). Denna väljare kan matcha med vilket element som helst, precis som ett wildcard.

Till exempel, följande regel gör att varje element i dokumentet blir rött:

* {color:red;}

Prova själv

Denna deklaration är ekvivalent med att lista alla element i dokumentet med en grupperad väljare. Med hjälp av en wildcard-väljare, behöver du bara trycka på en tangent (endast en stjärna) för att specificera att color-attributet för alla element i dokumentet ska vara rött.

Deklarationsgruppering

Vi kan både gruppera väljare och gruppera deklarationer.

Om du vill att alla h1-element ska ha en röd bakgrund och visa text i blått med 28 pixlar hög Verdana, kan du skriva följande stilar:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Men detta sätt är inte särskilt effektivt. Särskilt besvärligt blir det när vi skapar en lista med flera stilar för ett element med flera stilar. I stället kan vi gruppera deklarationerna tillsammans:

h1 {font: 28px Verdana; color: white; background: black;}

Detta har samma effekt som de tre föregående raderna i stilmallen.

Observera, att det är viktigt att gruppera deklarationer, att använda semikolon vid slutet av varje deklaration. Browsrarna ignorerar blanksteg i stilmallen. Så länge semikolon används, kan du utan bekymmer använda följande format för att skapa stilar:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Prova själv

Hur är det, är läsbarheten för den här skrivningen bättre?

Men om den andra semikolonen ignoreras, kommer användaragenten att tolka denna stilmall så här:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Prova själv

Eftersom background inte är en giltig värde för color, och eftersom endast ett nyckelord kan tilldelas color, kommer användaragenten att helt ignorera denna color-deklaration (inklusive background: black). På detta sätt kommer h1-titeln bara att visas i blått, utan röd bakgrund, men det är mer sannolikt att h1 inte alls får blått. Istället kommer dessa titlar bara att visas i standardfärg (vanligtvis svart) och utan bakgrundsfärg. font: 28px Verdana-deklarationen fungerar fortfarande korrekt, eftersom den verkligen avslutas med ett semikolon.

Som selektorgropning är deklarationsgropning också ett bekvämt sätt att korta ner stilarken, göra den tydligare och enklare att underhålla.

Tips:Det är en bra vana att lägga till ett semikolont efter den sista deklarationen i en regel. När du lägger till en annan deklaration behöver du inte oroa dig för att glömma att lägga till ett semikolont.

Kombination av selektorgropning och deklarationsgropning

Vi kan kombinera selektorgropning och deklarationsgropning i en regel för att definiera relativt komplexa stilar med få meningar.

Följande regler specificerar en komplex stil för alla rubriker:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Prova själv

Detta regeln definierar alla rubriks stilar som har vit bakgrund och grå text, med en innervåg på 10 pixlar och en 1 pixlar solid kant, texttypsnitt är Verdana.