CSS-Pseudoklassen :: nicht () und: Ziel

In diesem Artikel werden die vielseitigen CSS-Pseudoklassen :not() und :target untersucht, die ihre Kraft bei der Erstellung von anspruchsvollen und gezielten Stilen vorstellen. Wir werden uns mit ihren Funktionen befassen und praktische Anwendungen demonstrieren, einschließlich des Erstellens von JavaScript-freien Registerkarten.

Schlüsselkonzepte:

• Die :not() Pseudoklasse fungiert als Filter und wählt alle Elemente aus, außer diejenigen, die mit einem bestimmten Selektor entsprechen. Dies ermöglicht den genauen Ausschluss von Elementen aus Styling -Regeln.
• Die :target Pseudoklasse hebt den Dokumentabschnitt hervor, der einem bestimmten URL-Fragment entspricht (das Teil nach dem Symbol #). Dies ermöglicht das Erstellen interaktiver Elemente ohne JavaScript.

javaScript-freie Registerkarten mit :target:

Durch geschickt manipulierende URL-Fragmente und die :target -Pseudoklasse können wir funktionale Registerkarten-Schnittstellen erstellen, ohne sich auf JavaScript zu verlassen. Durch Klicken auf eine Registerkarte aktualisiert das URL -Fragment und löst den :target -Stil auf dem entsprechenden Registerkarteninhalt aus, wodurch es die sichtbare Ebene ist.

Ausschluss von Elementen mit :not():

Die Kraft von

:not() liegt in seiner Fähigkeit, Elemente aus Stilregeln auszuschließen. Die derzeitige Einschränkung, nur ein einziges Argument zu akzeptieren, erfordert jedoch die Erkettung für mehrere Ausschlüsse. Zum Beispiel wählt input:not([type=radio]):not([type=checkbox]):not([type=range]) alle Eingangselemente mit Ausnahme von Optionspunkten, Kontrollkästchen und Bereichseingängen aus. Zukünftige CSS-Spezifikationen versprechen eine verbesserte Funktionalität und ermöglichen von Kommas-getrennten Argumenten innerhalb von :not().

Auszug aus "CSS Master" von Tiffany B. Brown. Erhältlich in Buchhandlungen und als eBook.

In diesem Abschnitt werden erweiterte Pseudoklassen untersucht, einschließlich untergeordneter und typisierter untergeordneter Pseudoklasse (Auswahl von Elementen nach Position im Dokumentbaum) und Pseudoklassen eingeben (Zielelementfelder basierend auf ihren Werten und Zuständen).

Hervorhebung von Seitenfragmenten:

Fragment-Identifikatoren (z. B. #top, #footnote1) werden für die interne Navigation verwendet. Mit der Pseudoklasse :target können uns den Abschnitt stylen, der mit der aktuellen Fragment-Kennung ohne JavaScript entspricht. Zum Beispiel:

<code class="language-css">.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}</code>

Dieser Stil kommentiert mit einem gelben Hintergrund, wenn ihre ID mit dem URL -Fragment übereinstimmt.

Registerkarten nur CSS erstellen:

Die Pseudoklasse :target ist der Schlüssel zum Erstellen von Registerkarten für javaScript-freie. Durch Einstellen z-index Werte basierend auf dem Status :target, stellen wir sicher, dass nur die Registerkarte ausgewählter Registerkarte sichtbar ist.

<code class="language-css">.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}</code>

<code class="language-html"><div class="tabbed-widget">
  <div class="tab-wrap">
    <a href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>
  <ul class="tab-body">
    <li id="tab1"><p>This is tab 1.</p></li>
    <li id="tab2"><p>This is tab 2.</p></li>
    <li id="tab3"><p>This is tab 3.</p></li>
  </ul>
</div></code>

Barrierefreiheit Tipp: Für eine bessere Zugänglichkeit sollten Sie JavaScript verwenden, um aria-hidden Attribute zu verwalten.

:not() in Aktion:

Die Pseudoklasse :not() wird durch Styling-Formularbezeichnungen demonstriert, ausgenommen diejenigen mit der label-radio -Klasse.

<code class="language-css">[id^=tab] { position: absolute; }
[id^=tab]:first-child { z-index: 1; }
[id^=tab]:target { z-index: 2; }</code>

Ketten :not() ist entscheidend, wenn mehrere Elementtypen ausgeschlossen werden, wie unten gezeigt:

<code class="language-css">label:not(.label-radio) {
  font-weight: bold;
  display: block;
}</code>

Dies zielt effizient auf alle Eingangstypen außer Radio, Kontrollkästchen und Bereich.

FAQs auf :not() Selector:

Dieser Abschnitt enthält Antworten auf häufige Fragen zum :not() -Alektor, die seine Funktionalität, die Browserunterstützung und die Verwendung mit verschiedenen CSS -Selektoren abdecken. Die Antworten ähneln denen im Originaltext, aber für Klarheit und Zuversicht umformuliert.

Das obige ist der detaillierte Inhalt vonCSS-Pseudoklassen :: nicht () und: Ziel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!