Schnelle Erinnerung, dass: IS () und: WO () im Grunde genommen mit einem Schlüsselunterschied gleich sind

In jüngster Zeit haben viele Artikel die Praktikabilität des CSS erörtert :is() Relational Pseudo-Selectrator, die die Lesbarkeit von Verbundauswahlern verbessern kann. Zum Beispiel:

 : IS (Abschnitt, Artikel, beiseite): IS (H1, H2, H3, H4, H5, H6) {
  Farbe: #bada55;
}

Äquivalent zu:

 Abschnitt H1, Abschnitt H2, Abschnitt H3, Abschnitt H4, Abschnitt H5, Abschnitt H6, 
Artikel H1, Artikel H2, Artikel H3, Artikel H4, Artikel H5, Artikel H6, 
Neben H1, beiseite H2, beiseite H3, beiseite H4, beiseite H5, beiseite H6, 
NAV H1, NAV H2, NAV H3, NAV H4, NAV H5, NAV H6 {
  Farbe: #bada55;
}

Die Spezifität des :is() -Auskurs hängt jedoch vom spezifischsten Selektor seiner Parameter ab. Es gibt wenig Problem mit einfachen Element- und Klassenauswahlern, aber wenn der ID -Selektor enthalten ist, wird die Spezifität hoch:

 / * Spezifität: 0 0 1 */
: IS (H1, H2, H3, H4, H5, H6) {
  Farbe: #bada55;
}

/ * Spezifität: 1 0 0 *//
: IS (H1, H2, H3, H4, H5, H6, #id) {
  Farbe: #bada55;
}

Dies ist manchmal nützlich, beispielsweise können Sie absichtlich eine fiktive ID hinzufügen, um den Stil zu erzwingen, ähnlich wie das !important Schlüsselwort.

Aber was ist, wenn Sie das nicht wollen? Einige Artikel deuten darauf hin, dass Verschachtelungswählern nisten, dies ist jedoch nicht so bequem wie :is() .

Zu diesem Zeitpunkt ist :where() Selektor nützlich! Es ist genau das gleiche wie :is() , hat aber keine Spezifitätsprobleme. Seine Spezifität ist immer Null. Betrachten Sie es als einen spezifischen Zurücksetzen:

 / * Spezifität: 0 0 0 *//
: Wo (H1, H2, H3, H4, H5, H6) {
  Farbe: #bada55;
}

/ * Spezifität: 0 0 0 *//
: Wo (H1, H2, H3, H4, H5, H6, #id) {
  Farbe: #bada55;
}

Wenn die Spezifität von :is() von einem Selektor beeinflusst wird, dann ist :where() eine bessere Wahl.

Das obige ist der detaillierte Inhalt vonSchnelle Erinnerung, dass: IS () und: WO () im Grunde genommen mit einem Schlüsselunterschied gleich sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!