Testen Sie Ihre Fähigkeiten: Selektoren

Ziel dieses Fähigkeitstests ist es, zu beurteilen, ob Sie CSS-Selektoren verstehen.

Hinweis: Klicken Sie "Play" in den untenstehenden Codeblöcken, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Clipboard-Symbol) und in einem Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.

Aufgabe 1

In dieser Aufgabe sollen Sie CSS verwenden, um folgendes zu tun, ohne das HTML zu ändern:

Machen Sie <h1> Überschriften blau.
Geben Sie <h2> Überschriften einen blauen Hintergrund und weißen Text.
Bewirken Sie, dass Text, der in einem <span> eingeschlossen ist, eine Schriftgröße von 200% hat.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Text mit dem CSS angewendet für die Lösung der Aufgabe 1.

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel wiederherzustellen:

html

<div class="container">
  <h1>This is a heading</h1>
  <p>
    Veggies es <span>bonus vobis</span>, proinde vos postulo essum magis
    kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
    garlic.
  </p>
  <h2>A level 2 heading</h2>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
/* Add styles here */

Klicken Sie hier, um die Lösung anzuzeigen

Sie müssen die h1, h2 und span Selektoren ansprechen, um deren Farbe oder Größe zu ändern.

css

h1 {
  color: blue;
}

h2 {
  background-color: blue;
  color: white;
}

span {
  font-size: 200%;
}

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie die folgenden Änderungen am Aussehen des Inhalts in diesem Beispiel vornehmen, ohne das HTML zu ändern:

Geben Sie dem Element mit einer id von special einen gelben Hintergrund.
Geben Sie dem Element mit einer Klasse von alert einen 2px grauen Rahmen.
Wenn das Element mit der Klasse alert auch eine Klasse stop hat, machen Sie den Hintergrund rot.
Wenn das Element mit der Klasse alert auch eine Klasse go hat, machen Sie den Hintergrund grün.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Text mit dem CSS angewendet für die Lösung der Aufgabe 2.

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel wiederherzustellen:

html

<div class="container">
  <h1>This is a heading</h1>
  <p>
    Veggies es <span class="alert">bonus vobis</span>, proinde vos postulo
    <span class="alert stop">essum magis</span> kohlrabi welsh onion daikon
    amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <h2 id="special">A level 2 heading</h2>
  <p>Gumbo beet greens corn soko endive gumbo gourd.</p>
  <h2>Another level 2 heading</h2>
  <p>
    <span class="alert go">Parsley shallot</span> courgette tatsoi pea sprouts
    fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
    earthnut pea peanut soko zucchini.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
/* Add styles here */

Klicken Sie hier, um die Lösung anzuzeigen

Dieser Test prüft, ob Sie den Unterschied zwischen Klassen- und ID-Selektoren verstehen und auch wie Sie mehrere Klassen auf einem Element ansprechen.

css

#special {
  background-color: yellow;
}

.alert {
  border: 2px solid grey;
}

.alert.stop {
  background-color: red;
}

.alert.go {
  background-color: green;
}

Aufgabe 3

In dieser Aufgabe möchten wir, dass Sie die folgenden Änderungen vornehmen, ohne das HTML zu ändern:

Gestalten Sie Links, indem Sie den Link-Zustand orange machen, besuchte Links grün und das Unterstreichen beim Hover entfernen.
Machen Sie das erste Element innerhalb des Containers font-size: 150% und die erste Zeile dieses Elements rot.
Streifen Sie jede zweite Zeile in der Tabelle, indem Sie diese Zeilen auswählen und ihnen eine Hintergrundfarbe von #333 und Vordergrund weiß geben.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Text mit dem CSS angewendet für die Lösung der Aufgabe 3.

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel wiederherzustellen:

html

<div class="container">
  <p>
    Veggies es <a href="http://example.com">bonus vobis</a>, proinde vos postulo
    essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon
    azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <table>
    <tbody>
      <tr>
        <th>Fruits</th>
        <th>Vegetables</th>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Potato</td>
      </tr>
      <tr>
        <td>Orange</td>
        <td>Carrot</td>
      </tr>
      <tr>
        <td>Tomato</td>
        <td>Parsnip</td>
      </tr>
      <tr>
        <td>Kiwi</td>
        <td>Onion</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>Beet</td>
      </tr>
    </tbody>
  </table>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  width: 300px;
}

td,
th {
  padding: 0.2em;
  text-align: left;
}

css

/* Add styles here */

Klicken Sie hier, um die Lösung anzuzeigen

Wenden Sie eine Pseudo-Klasse (:first-child) und ein Pseudo-Element (::first-line) auf den Inhalt an. Gestalten Sie die :link, :visited, und :hover Zustände des a Elements und erstellen Sie gestreifte Tabellenzeilen mit der :nth-child Pseudo-Klasse.

css

.container p:first-child {
  font-size: 150%;
}

.container p:first-child::first-line {
  color: red;
}

a:link {
  color: orange;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

tr:nth-child(even) {
  background-color: #333;
  color: #fff;
}

Aufgabe 4

In dieser Aufgabe sollen Sie folgendes tun:

Machen Sie jeden Absatz, der direkt auf ein <h2> Element folgt, rot.
Entfernen Sie die Aufzählungszeichen und fügen Sie eine 1px graue untere Grenze nur zu Listenelementen hinzu, die ein direktes Kind der ul mit einer Klasse von list sind.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Text mit dem CSS angewendet für die Lösung der Aufgabe 4.

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel wiederherzustellen:

html

<div class="container">
  <h2>This is a heading</h2>
  <p>This paragraph comes after the heading.</p>
  <p>This is the second paragraph.</p>

  <h2>Another heading</h2>
  <p>This paragraph comes after the heading.</p>
  <ul class="list">
    <li>One</li>
    <li>
      Two
      <ul>
        <li>2.1</li>
        <li>2.2</li>
      </ul>
    </li>
    <li>Three</li>
  </ul>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
/* Add styles here */

Klicken Sie hier, um die Lösung anzuzeigen

Diese Aufgabe überprüft, ob Sie verstehen, wie man verschiedene Kombinatoren verwendet. Hier ist eine passende Lösung:

css

h2 + p {
  color: red;
}

.list > li {
  list-style: none;
  border-bottom: 1px solid #ccc;
}

Aufgabe 5

In dieser Aufgabe fügen Sie CSS mit Attributselektoren hinzu, um folgendes zu tun:

Zielen Sie auf das <a> Element mit einem title Attribut und machen Sie den Rahmen pink (border-color: pink).
Zielen Sie auf das <a> Element mit einem href Attribut, das irgendwo in seinem Wert das Wort contact enthält und machen Sie den Rahmen orange (border-color: orange).
Zielen Sie auf das <a> Element mit einem href Wert, der mit https beginnt und geben Sie ihm einen grünen Rahmen (border-color: green).

Ihr Endergebnis sollte wie das Bild unten aussehen:

Vier Links mit unterschiedlich farbigen Rahmen.

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel wiederherzustellen:

html

<ul>
  <li><a href="https://example.com">Link 1</a></li>
  <li><a href="http://example.com" title="Visit example.com">Link 2</a></li>
  <li><a href="/contact">Link 3</a></li>
  <li><a href="../contact/index.html">Link 4</a></li>
</ul>

body {
  font: 1.2em / 1.5 sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 0 0.5em 0;
}

a {
  display: block;
  padding: 0.5em;
}

css

a {
  border: 5px solid grey;
}
/* Add styles here */

Klicken Sie hier, um die Lösung anzuzeigen

Um Elemente mit einem Titelattribut zu selektieren, können wir titel innerhalb der eckigen Klammern hinzufügen (a[title]), was den zweiten Link wählt, der der einzige mit einem Titelattribut ist.
Zielen Sie auf das <a> Element mit einem href Attribut, welches das Wort "contact" irgendwo in seinem Wert enthält und machen Sie den Rahmen orange (border-color: orange). Es gibt zwei Dinge, die wir hier übereinstimmen wollen, den href Wert /contact und auch ../contact. Daher müssen wir die Zeichenfolge "contact" irgendwo im Wert mit *= übereinstimmen lassen. Dies wird die dritten und vierten Links selektieren.
Zielen Sie auf das <a> Element mit einem href-Wert, der mit https beginnt und geben Sie ihm einen grünen Rahmen (border-color: green). Suchen Sie nach einem href Wert, der mit "https" beginnt, also verwenden Sie ^= um nur den ersten Link zu selektieren.

css

a[title] {
  border-color: pink;
}
a[href*="contact"] {
  border-color: orange;
}
a[href^="https"] {
  border-color: green;
}

Siehe auch

CSS-Styling-Grundlagen