CSS element väljare

CSS element väljare

De vanligaste CSS-väljarna är elementväljare. Med andra ord är dokumentets element den grundläggande väljaren.

När du sätter HTML-stil, är väljaren vanligtvis en HTML-element, som p, h1, em, a, eller till och med html själv:

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

Prova själv

Stil kan bytas mellan olika element.

Anta att du beslutat att sätta stilen för ovanstående stycken text (inte h1-element) till silver. Det räcker att ändra h1-väljaren till p:

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

Prova själv

Typväljare

I W3C-standarden kallas elementväljare också för typväljare (type selector).

Typväljare matchar namnet på elementtypen i dokumentets språk. Typväljare matchar varje enskilt exempel på elementtypen i dokumentträdet.

Följande regler matchar alla h1-element i dokumentträdet:

h1 {font-family: sans-serif;}

Därför kan vi också ange stil för element i XML-dokument:

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>Påminnelse</heading>
<body>Glöm inte mötet!</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

Genom de ovanstående exemplen kan du se att CSS-element väljare (typ väljare) kan ställa in stil för element i ett XML-dokument.

Om du behöver mer information om att lägga till stil till XML-dokument, besök CodeW3C:s XML tutorial。