So funktioniert das: nicht () Wahl in CSS3

In einigen Fällen ist es einfacher Objekte in CSS3 auszuwählen entsprechend den Eigenschaften, dass sie nicht haben - dies zu tun, können Sie eine verwenden: nicht (Selektor). Zum Beispiel könnten Sie die Formatierung eines jeden Objekts zu ändern, die nicht in a

-Tag.

In diesem Fall könnten Sie eine Liste von Tags mit dem Komma Selektor erstellen und hoffen, dass Sie Ihre Liste vollständig ist, oder Sie könnten nur die verwenden: nicht () Wähler. Zum Beispiel: nicht (p) wählt jedes Objekt, das sich nicht um eine

-Tag. Sie können auch komplexe Auswahlen erstellen, die unter Verwendung von: nicht () Wähler: Ein Wähler aus: nicht (div> p), zum Beispiel, wählt jeder

Tag, das kein hat

Auch mit dieser kurzen Liste von Tag-Selektoren können Sie sehen, dass CSS ziemlich flexibel ist, wenn sie mit Tags zu arbeiten. die Selektoren in Aktion sehen, hilft man sie ein bisschen besser zu verstehen. Das folgende Verfahren zeigt, wie die verschiedenen Tags verwenden:

1. erstellen Sie ExternalCSS.HTML und ExternalCSS.CSS Dateien und kopieren Sie sie in einen neuen Ordner.

2. Öffnen Sie ExternalCSS.HTML.

3. Geben Sie den folgenden Code nach dem bestehenden

   in der Datei markieren und die Änderungen auf der Festplatte speichern.

   Text innerhalb eines DIV.
   Text mit einem DIV Elternteil.
   Text nach einem DIV.
   Mehr Text nach einem DIV.

   Dieser Code fügt einfach Tags in spezifischen Regelungen, so dass Sie die verschiedenen Selektoren testen können. Wenn Sie die resultierende Datei jetzt öffnen, sehen Sie, dass jeder von der

   Tags wurde wie das Original automatisch formatiert

   -Tag.

   

4. Öffnen Sie ExternalCSS.CSS.

5. Geben Sie den folgenden Code nach den bestehenden Designs und die Änderungen auf der Festplatte speichern.

   div> p {text-align: right;} das Bild für 2.2 übertragen Sie hier

6. Laden Sie die Testseite.

   Beachten Sie, dass die einzige

   Tag, das betroffen ist, ist derjenige, der hat

   Tag als direkte Elternteil. Darüber hinaus feststellen, dass die bisherigen Formatierungs Kaskaden in die aktuelle Formatierung. Sie haben noch keinen der bestehenden Formatierung außer Kraft gesetzt, so dass der Text erscheint nach wie vor - es nutzt einfach das Recht, Rechtfertigung anstelle des Standard-links; Begründung.
   

7. Geben Sie den folgenden Code nach den bestehenden Designs und die Änderungen auf der Festplatte speichern.

   div p {text-decoration: line-through-background-color: # ff7f7f-}

8. Laden Sie die Testseite.

   Beachten Sie, dass zwei Linien sind diesmal betroffen. Darüber hinaus hat der Hintergrund-Farbe Stil geändert, so dass diese beiden Linien verwenden, um die neue Farbe - sie Vorrang vor der ursprünglichen Farbe nimmt. Wenn Sie über die Kaskadierung Teil von CSS denken, denken Sie an einen Bach, wo Änderungen Vorrang gegenüber dem ursprünglichen Zustand des Wassers stromabwärts nehmen.

   

9. Geben Sie den folgenden Code nach den bestehenden Designs und die Änderungen auf der Festplatte speichern.

   div + p {font-family: Monospace-font-style: Italic-}

10. Laden Sie die Testseite.

    Nur die Linie, die unmittelbar nach dem erscheint

    betroffen ist: Die Schrift auf einer nichtproportionalen Schriftart geändert hat (in der Regel für Code reserviert) und ist kursiv geschrieben.
    

11. Geben Sie den folgenden Code nach den bestehenden Designs und die Änderungen auf der Festplatte speichern.

    div ~ p {font-weight: kühner-font-size: 30px; margin: 0px; color: # 7f007f-}

12. Laden Sie die Testseite.

    

Beachten Sie, dass sowohl

Tags, die nach dem erscheinen