Können CSS-Selektoren auf Elemente basierend auf dem Klassenpräfix abzielen?

CSS-Selektoren nach Klassenpräfix

Frage:

Ist es möglich, ein CSS anzuwenden? Regel für Elemente, bei denen mindestens eine Klasse mit einem angegebenen Präfix beginnt? Angenommen, wir haben das folgende HTML-Snippet:

<div>

Können wir eine Regel anwenden, die nur auf Divs mit Klassen abzielt, die mit „status-“ beginnen?

Antwort:

CSS 2.1:

In CSS 2.1, das ist nicht möglich.

CSS 3:

CSS3 hat Attribut-Teilstring-Matching-Selektoren eingeführt, die dies ermöglichen:

div[class^="status-"], div[class*=" status-"]

• [class^="status-"] stimmt mit Elementen überein, mit denen das Klassenattribut beginnt „status-“.
• [class*="status-"] stimmt mit Elementen überein, bei denen das Klassenattribut „status-“ direkt nach einem Leerzeichen enthält (um sicherzustellen, dass es nicht Teil eines anderen Wortes ist).

Beachten Sie, dass der letztere Selektor absichtlich ein Leerzeichen enthält, da Klassennamen normalerweise durch Leerzeichen getrennt werden. Dadurch werden alle anderen Klassen im Klassenattribut des Elements überprüft und auch Fälle behandelt, in denen Klassenattribute mit Leerzeichen aufgefüllt sind.

Wenn Sie garantieren können, dass Ihr Markup niemals Elemente enthält, bei denen das Statuspräfix in ein anderes Wort eingebettet ist, sind Sie könnte den Selektor auf [class*="status-"] vereinfachen. Aus Stabilitätsgründen wird jedoch die Kombination beider Selektoren empfohlen.

Alternativ, wenn Sie die Kontrolle über die HTML-Generierung haben, ist es möglicherweise einfacher, eine dedizierte „Status“-Klasse mit dem gewünschten Präfix zu erstellen.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Selektoren auf Elemente basierend auf dem Klassenpräfix abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!