Erfahren Sie mehr über :is() und :where() in CSS, um Ihren Stilcode prägnanter zu gestalten!

In diesem Artikel erfahren Sie mehr über zwei effizientere Selektoren in CSS. Mit ihnen können Sie weniger Code verwenden, um Elemente effektiver auszuwählen, und so den Code vereinfachen.

Wenn Neulinge mit CSS beginnen, sind sie oft durch zwei Dinge (persönliche Gedanken) am meisten verwirrt: 1. CSS basiert auf dem Dokumentenfluss, und manchmal entspricht der geschriebene Code nicht Ihren Erwartungen! 2. Komplexe Selektoren, die in verschiedenen Szenarien verwendet werden sollten, und die Selektoren sind zu lang, was Neulinge sehr verwirrt. Ein solcher Code wurde kürzlich im Code des Unternehmens entdeckt.

.home .col .card a i.i1,
.home .col .card a i.i2,
.home .col .card a i.i3,
.home .col .card a i.i4,
.home .col .card a i.i5,
.home .col .card a i.i5,
.home .col .card a i.i6,
.home .col .card a i.i7 {
  background-size: 35px;
  width: 60px;
  height: 42px;
  margin: auto;
}

Auf den ersten Blick sind es wirklich viele davon. Als Übergabeperson war ich wirklich fassungslos.

Sie können Ihr kleines Gehirn nutzen und verschiedene Lösungen ausprobieren, um die Abkürzung dieses Codes zu vereinfachen!

In diesem Artikel werden wir über die effizienteren Selektoren von CSS3 sprechen, die für auffällige Selektoren sorgen.

:ist

Elemente effizienter mit weniger Code auswählen! 666, großartig! ! !

Um es einfach auszudrücken: Der Code wird durch das Extrahieren gemeinsamer Selektoren vereinfacht!

Hinweis: :is() ursprünglicher Name :match()

Beispiel 1. Global:is

Szenario: Während der Frontend-Entwicklung kann in einigen Fällen die Farbe des Textes in verschiedenen Divs gleich sein von.

Zum Beispiel ist in den drei Divs unten die Textfarbe der drei Divs komplett rot.

    <div class="div1">
        <p>p1</p>
    </div>
    <div class="div2">
        <p>p2</p>

    </div>
    <div class="div3">
        <p>p3</p>
    </div>

Basisversion (Anfänger)

Für viele Anfänger wird tatsächlich die folgende Schreibmethode angezeigt: Stellen Sie das gleiche p für verschiedene Divs ein.

.div1>p{
    color:red;
}
.div2>p{
    color:red;
}
.div3>P{
    color:red;
}

Erweiterte Version

Da die Anzahl der geschriebenen Codes zunimmt, entdecken Anfänger nach und nach, dass es viele gängige Codes gibt, die extrahiert werden können. Hier kann beispielsweise color:red extrahiert werden. Wow, der Code wurde sofort stark reduziert! ! !

.div1>p,
.div2>p,
.div3>P{
    color:red;
}

Erweiterte Version (:is)

Zu diesem Zeitpunkt fühlte sich der Anfänger wieder, da Farbe:rot erwähnt werden kann, warum nicht p? Daher erschien die folgende, prägnantere Version.

:is(.div1,.div2,.div3) >P {
  color:red;
}

Beispiel 2 Spezifisches Element: is

Sehen Sie sich den folgenden Code an. Wir möchten erkennen, dass die Farbe des Div rot ist und die Farbdefinition in textColor erfolgt und p schwarz bleibt.

<div class="textColor">
        p1
</div>
<div class="textColor">
    p2
</div>
<div class="textColor">
    p3
</div>
<p class="textColor">p4</p>

Nachdem ich Beispiel 1 oben gelesen habe, denke ich, dass einige Anfänger anfangen werden, so zu schreiben: Fügen Sie dem p-Tag direkt neue Stile hinzu.

:is(.textColor) {    color:red;

}.pColor{   color: black;
}
<p class="textColor pColor">p4</p>

Aber: is unterstützt die Schreibweise bestimmter Elemente: Sie müssen nur

div:is(.textColor) {
    color:red;
}

vor:is: is

div:is(.textColor) :is(h1,h4){
  color:red;
}
<div class="textColor">
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
</div>

weight

:is hinzufügen. Das Gewicht ist die von bereitgestellte ID , bestimmt durch Selektoren wie Elemente, kann schwierig zu verstehen sein. Ein Beispiel wird es sofort verdeutlichen.

<ol id="olID">
    <li>li1</li>
    <li>li2</li>
</ol>

Lass uns die Schriftfarbe von li ändern.

:is(ol) li {
  color: red;
}
ol li {
  color: blue;
}

Du kannst erraten, welche Farbe es hat.

ist blau: Warum ist der Parameter von is ol, was mit dem Gewicht des ol-Selektors unten übereinstimmt? Und weil Blau unten ist, verwendet der Browser automatisch Blau, um Rot zu überdecken.

Schauen Sie sich die Schrift unten an, wir fügen dem is-Parameter eine ID hinzu: #olID, und die endgültige Farbe ist Rot. Dies liegt daran, dass ein ID-Selektor mit höherer Gewichtung verwendet wird.

 :is(ol,#olID) li {
        color: red;
      }
      ol li {
        color: blue;
      }

:where

:Die Syntaxparameter von where und :is sind genau die gleichen. Der einzige Unterschied besteht darin, dass das Gewicht von where immer 0 oder das niedrigste ist. Immer noch das gleiche Beispiel oben.

<ol id="olID">
  <li>li1</li>
  <li>li2</li>
</ol>

Hier sind wir:

:where(ol,#olID) li {
  color: red;
}
ol li {
  color: blue;
}

Das Endergebnis ist blau

Anwendungsszenario

Denn ich muss sagen, warum brauchen wir :where jetzt, wo wir haben? nützlich. Beispielsweise kann es bei der Entwicklung einer Komponentenbibliothek verwendet werden, da das Gewicht von where sehr gering ist, so dass es für Benutzer einfach ist, es abzudecken, und es ist nichts Wichtiges, V-Deep und dergleichen erforderlich!

PS: Die kleinen Kastanien im Vorwort können optimiert werden

Originaladresse: https://juejin.cn/post/7005366966554722312

Autor: Front-End-Picker

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über :is() und :where() in CSS, um Ihren Stilcode prägnanter zu gestalten!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!