Universal Selector (CSS -Selektor)-CSS-Tutorial-php.cn

Universal Selector (CSS -Selektor)

Joseph Gordon-Levitt

Freigeben： 2025-02-27 08:32:10

Original

599 Leute haben es durchsucht

Universal Selector (CSS Selector)

Universal Selector (CSS -Selektor)

Beschreibung

Der Universal Selector entspricht jedem Elementtyp. Es kann impliziert (und daher weggelassen) werden, wenn es nicht die einzige Komponente des einfachen Selektors ist. Die hier gezeigten zwei Auswahlbeispiele sind gleichwertig:

*.warning {
  ⋮ <span>declarations
</span>}
.warning {
  ⋮ <span>declarations
</span>}

Nach dem Login kopieren

Es ist wichtig, den universellen Selektor nicht mit einem Wildcard -Charakter zu verwechseln - der universelle Selektor stimmt nicht mit „Null oder mehr Elementen“ überein. Betrachten Sie das folgende HTML -Fragment:

<body>
  <div>
    <h1>The <em>Universal</em> Selector</h1>
    <p>We must <em>emphasize</em> the following:</p>
    <ul>
      <li>It's <em>not</em> a wildcard.</li>
      <li>It matches elements regardless of <em>type</em>.</li>
    </ul>
    This is an <em>immediate</em> child of the division.
  </div>
</body>

Nach dem Login kopieren

Der Selektor Div * EM entspricht den folgenden EM -Elementen:

"universell" im H1 -Element (* übereinstimmt mit der
)
"betont" im P -Element (* übereinstimmt mit der
)
"nicht" im ersten Li -Element (* übereinstimmt dem
- )
- "Typ" im zweiten Li -Element (* übereinstimmt mit der
  - )
  Es wird jedoch nicht mit dem gleiche Element übereinstimmen, da dies ein unmittelbares Kind des DIV -Elements ist - es gibt nichts zwischen
  und , damit die * übereinstimmen.
  
  Beispiel
  
  Dieser Regelsatz wird auf jedes Element in einem Dokument angewendet:
  * { margin: 0; padding: 0; }
  Nach dem Login kopieren
  
  häufig gestellte Fragen zum Universal Selector in CSS
  
  Was ist der Unterschied zwischen dem Universal Selector und anderen Selektoren in CSS? Dies unterscheidet sich von anderen Selektoren wie Klassenauswahl, ID -Selektoren oder Element -Selektoren, die nur bestimmte Elemente basierend auf ihrer Klasse, ID oder ihrem Elementtyp übereinstimmen. Der universelle Selektor ist ein leistungsstarkes Werkzeug, sollte jedoch sparsam verwendet werden, da er zu unerwarteten Ergebnissen führen kann, wenn sie nicht sorgfältig verwendet werden. Sie können beispielsweise den Universal Selector mit einem Klassenauswahl kombinieren, um einen Stil auf alle Elemente mit einer bestimmten Klasse anzuwenden. Dies bedeutet, dass bei widersprüchlichen Stilen der vom Universal Selector definierte Stil durch Stile, die von anderen Selektoren definiert wurden, überschrieben wird. Es ist jedoch immer noch eine gute Praxis, spezifischere Selektoren zu verwenden, wann immer möglich, um die Arbeit des Browsers zu verringern.
  
  Kann der universelle Selektor in Medienabfragen verwendet werden? Dies kann nützlich sein, um Stile auf alle Elemente auf der Seite unter bestimmten Bedingungen anzuwenden, z. B. wenn das Ansichtsfenster eine bestimmte Breite ist. Da es jedoch die niedrigste Spezifität hat, kann es von anderen Selektoren überschrieben werden. Es ist jedoch im Allgemeinen besser, spezifischere Selektoren für diese Fälle zu verwenden. Es kann auch verwendet werden, um einen Stil auf alle Elemente auf der Seite anzuwenden, z. B. eine Standardschrift oder -farbe. Überbeanspruchung kann zu unerwarteten Ergebnissen führen und es schwieriger machen, Ihr CSS zu bewahren. Es kann auch möglicherweise die Leistung beeinflussen, obwohl dies bei modernen Browsern normalerweise vernachlässigbar ist. Es kann jedoch geringfügige Unterschiede in der Implementierung geben. Daher ist es immer eine gute Idee, Ihr CSS in mehreren Browsern zu testen.

Das obige ist der detaillierte Inhalt vonUniversal Selector (CSS -Selektor). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!