CSS-Elementselektor

CSS-Elementselektor

Die häufigsten CSS-Selektoren sind Elementselektoren. Mit anderen Worten, die Elemente im Dokument sind die grundlegendsten Selektoren.

Wenn Sie Stile für HTML festlegen, ist der Selektor in der Regel ein HTML-Element, wie z.B. p, h1, em, a oder sogar html selbst:

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

Versuchen Sie es selbst

Stile können von einem Element auf ein anderes übertragen werden.

Angenommen, Sie entscheiden sich, den obigen Abschnittstext (statt h1-Elemente) in Grau zu setzen. Es reicht aus, den h1-Selektor in p zu ändern:

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

Versuchen Sie es selbst

Typenselektor

In den W3C-Standards wird der Elementselektor auch als Typenselektor (type selector) bezeichnet.

„Typenselektoren passen auf die Namen der Elementtypen im DokumentSprach. Typenselektoren passen auf jede Instanz dieses Elementtyps im Dokumentbaum an.“

Die folgenden Regeln passen auf alle h1-Elemente im Dokumentbaum:

h1 {font-family: sans-serif;}

Daher können wir auch Stile für Elemente in XML-Dokumenten festlegen:

XML-Dokument:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<bis>George</bis>
<von>John</von>
<heading>Erinnerung</heading>
<body>Denken Sie nicht an das Treffen!</body>
</note>

CSS-Dokument:

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

Effekt anzeigen

Durch die obigen Beispiele können Sie sehen, dass der CSS-Elementselektor (Typenselektor) das Styling von Elementen in XML-Dokumenten einstellen kann.

Wenn Sie mehr über das Hinzufügen von Stilen zu XML-Dokumenten erfahren möchten, besuchen Sie bitte XML-Tutorial.