CSS3 Selectors

CSS3 bietet Zugriff auf eine Vielzahl von Selektoren, die Sie, welches Element formatiert werden auf einer Seite verwenden zu identifizieren. Ein Selektor definiert, was den Stil zu Forma- definiert, wie es zu formatieren. Allerdings ist es einfach, in Selektor Überlastung zu gehen. Die meisten Entwickler verwenden eine Kombination aus Tag und Attributselektoren alle Wähler bezogene Aufgaben zu erfüllen. Hier sind die häufigsten verwendeten Tag-Selektoren, die Methoden Gesamt Auswahl bieten.

• Etikett,Etikett: Trennen von zwei Tags mit einem Komma bedeutet, daß beide Tags ausgewählt, und zwar unabhängig davon, wo sie in dem Dokument angezeigt. Beispielsweise unter Verwendung von p, div würde alles auswählen

  und Tags innerhalb des Dokuments.

• Etikett>Etikett: Trennen von zwei Tags mit einem größer-als-Zeichen (>) Teilt dem Browser einen Tag auswählen, die einen anderen Tag als Eltern hat. Zum Beispiel, wenn Sie

  und Verwendung div> p, der Browser wählt die

  -Tag.

• Etikett Etikett: Trennen von zwei Tags, die von einem Raum teilt dem Browser einen Tag auswählen, die in einem anderen Tag erscheint. Dieser Selektor unterscheidet von der Verwendung eines größer ist als in Zeichen, dass der erste Tag nicht direkt unmittelbar vor dem zweiten Tag erscheinen muss. Zum Beispiel, wenn Sie

  und Verwendung div> p, der Browser wird nichts aus. Wenn Sie jedoch verwenden div p Stattdessen wählt der Browser die

  -Tag.

• Etikett+Etikett: Trennen von zwei Tags mit einem Pluszeichen (+) Teilt dem Browser einen Tag auswählen, die unmittelbar nach einem anderen Tag erscheint. Zum Beispiel, wenn Sie

  und Verwendung div + p, der Browser wählt die

  -Tag. Beachten Sie, dass die

  Tag erscheint nicht im Tag, es erscheint nach dem Tag.

• Etikett~Etikett: Trennen von zwei Tags mit einer Tilde (~) Teilt dem Browser mit jedem Tag zu wählen, der nach einem anderen Tag erscheint. Zum Beispiel, wenn Sie

  und Verwendung div ~ p, wird der Browser sowohl wählen

  Tags. Dies unterscheidet sich von div + p (Wo der Browser wählen nur die erste

  Tag, das den Tag folgt).

• :Wurzel: Wählt das Wurzelelement des Dokuments. Das Wurzelelement ist abhängig vom Dokumenttyp. Dieser Selektor ist in der Regel mit XML-Dokumenten verwendet, aber man könnte es möglicherweise mit einem beliebigen Dokumenttyp verwenden.

Um eine feine Auswahl an genau der richtigen Elemente zur Verfügung zu stellen, verwenden Entwickler oft Attributselektoren anstelle von Tag-Selektoren. Hier sind die Attributselektoren, die Entwickler verwenden häufig.

• .Klassenname: Wählt alle Objekte, die eine haben Klasse Attributwert mit dem angegebenen Namen. Beispielsweise, .StdPara jedes Objekt auswählen würde, die eine hat class = "StdPara" Attribut ohne Rücksicht auf Objekttyp.

• #Ich würde: Wählt alle Objekte, die eine haben Ich würde Attributwert mit dem angegebenen Namen. Beispielsweise, #ThirdHeader jedes Objekt auswählen würde, die eine hat id = "ThirdHeader" Attribut ohne Rücksicht auf Objekttyp.

• : Lang (Language Identifier): Wählt ein beliebiges Objekt mit der angegebenen Sprache Wert. Beispielsweise, : Lang (en) würde wählen Sie ein Objekt, das Englisch als Sprache verwendet. Hier ist eine Liste von gemeinsame Sprache Identifikatoren.

• [Attribut]: Wählt alle Objekte, die ein bestimmtes Attribut unabhängig von der Attributwert verwenden. Beispielsweise, [Lang] würden alle Objekte auswählen, die die Verwendung lang Attribut.

• [Attribut=Wert]: Wählt alle Objekte, die ein Attribut mit einem bestimmten Wert haben. Der Wert muss genau übereinstimmen. Beispielsweise, [Lang = "en-us"] auswählen würde jedes Objekt, das eine Sprache Attribut mit einem Wert von hat Englisch.

• [Attribut~ =Wert]: Wählt alle Objekte, die ein Attribut haben, die einen bestimmten Wert enthält. Der Wert suchen muss nur irgendwo erscheinen innerhalb Wert als Ganzes. Beispielsweise, [Title ~ = "Secondary"] wählt alle Objekte mit dem Titel Attribute, die das Wort Sekundär als diskretes Wort. Dieser Selektor arbeitet mit ganzen Wörtern.

• [Attribut| =Wert]: Wählt alle Objekte, die ein Attribut haben, die mit einem bestimmten Wert beginnt. Der Suchwert muss am Anfang des Wertes als Ganzes zu erscheinen, muss aber nicht der gesamte Wert sein. Beispielsweise, [Title | = "Sub"] wählt alle Objekte mit dem Titel Attribute, die mit dem Wort beginnen Sub. Dieser Selektor arbeitet mit Bindestrichen Bedingungen.

• [Attribut^ =Wert]: Wählt alle Objekte, die ein Attribut haben, die mit einem bestimmten Wert beginnt. Beispielsweise, [Title | = "Sub"] wählt alle Objekte mit dem Titel Attribute, die mit dem Wort beginnen Sub. Diese Form des Wählers ist weniger restriktiv als die [Attribut | = Wert] Attribut. Mit diesem Formular wird wählen title = "subheader", title = "Sub-Header", oder title = "Sub-Header" mit der gleichen Zuverlässigkeit.

• [Attribut$ =Wert]: Wählt alle Objekte, die ein Attribut haben, die mit einem bestimmten Wert endet. Beispielsweise, [Title $ = "Secondary"] wählt alle Objekte mit dem Titel Attribute, die mit dem Wort beenden Sekundär. Diese Form des Attributs ist nicht einschränkende - es erfordert keine spezielle Formatierung.

• [Attribut* =Wert]: Wählt alle Objekte, die ein Attribut haben, die einen bestimmten Wert enthält. Beispielsweise, [Title $ = "Secondary"] wählt alle Objekte mit dem Titel Attribute, die mit dem Wort enthalten Sekundär. Diese Form des Wählers ist weniger restriktiv als die [Attribut~ =Wert] Attribut. Mit diesem Formular wird select title = "SecondaryParagraph", title = "Secondary Paragraph", oder title = "Secondary-Paragraph" mit der gleichen Zuverlässigkeit.

Ein besonderer nicht() Selektor vervollständigt die gemeinsamen Array von Selektoren. Um den Browser zu sagen, nicht einen bestimmten Tag oder ein Attribut zu wählen, aber alles andere, anstatt zu wählen, verwenden Sie die :nicht() Wähler. Beispielsweise, : Nicht (p) würde man auf der Seite alles bis auf die Absatz-Tags auswählen.