CSS elementselektorer

CSS elementselektorer

De mest almindelige CSS-vælger er elementvælger. På anden side er dokumentets elementer de grundlæggende vælger.

Når du sætter HTML-stil, vil vælgeren normalt være en HTML-element, såsom p, h1, em, a, eller endda html selv:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

Prøv det selv

Stil kan skiftes fra et element til et andet.

Antag, at du beslutter at sætte stilen på ovenstående afsnitstekst (ikke h1-elementer) til grå. Det kræver kun at ændre h1-vælgeren til p:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

Prøv det selv

Typevælger

I W3C-standarder kaldes elementvælger også for typevælger (type selector).

“Typevælger matcher navnet på elementtyper i dokumentets sprog. Typevælger matcher hver enkelt instans af elementtypen i dokumenttræet.”

Følgende regler matcher alle h1-elementer i dokumenttræet:

h1 {font-family: sans-serif;}

Derfor kan vi også tilpasse stilarter til elementer i XML-dokumenter:

XML-dokument:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

CSS dokument:

note
  {
  font-family: Verdana, Arial;
  margin-left: 30px;
  }
to
  {
  font-size: 28px;
  display: block;
  }
from
  {
  font-size: 28px;
  display: block;
  }
heading
  {
  color: red;
  font-size: 60px;
  display: block;
  }
body
  {
  color: blue;
  font-size: 35px;
  display: block;
  }

Se effekten

Ved hjælp af de ovenstående eksempler kan du se, at CSS elementselektorer (typevalg) kan sætte stil på elementer i XML-dokumenter.

Hvis du har brug for mere viden om at tilføje stil til XML-dokumenter, besøg CodeW3C's XML undervisning。