Wählen Sie ein Element mit einem nicht leeren Attribut aus

Verwenden Sie den CSS-Selektor, um Elemente mit nicht leeren Attributen auszuwählen

Kurze Antwort:

 [data-foo]: nicht ([data-foo = ""]) {}

Detaillierte Erklärung: (Die Schlussfolgerung ist dieselbe und erklärt nur, warum wir dies tun müssen.)

Angenommen, Sie haben ein Element, das eine spezielle data- für den Stil verwendet:

<div data-highlight="product">
</div>

Sie möchten das Element lokalisieren und spezielle Aktionen ausführen, wenn Sie hervorgehoben werden.

 [Datenhighlight] {
  Schriftgröße: 125%; 
}

[data-highlight = "product"] img {
  Ordnung: 1;
}

Die data- ist Teil der Vorlage, sodass Sie einen beliebigen Wert haben können, den Sie festgelegt haben.

<div data-highlight="{{ value }}">
</div>

Manchmal gibt es keinen Wert! Daher ist der Ausgang HTML:

<div data-highlight="">
</div>

Aber das kann schwierig sein. Siehe den ersten CSS-Code-Block oben, wir möchten alle Elemente mit data-highlight Attribut finden. Wir möchten dies jedoch nur dann tun, wenn es einen Wert hat. Wenn der Wert leer ist, möchten wir nur besondere Stile überspringen.

Im Idealfall entfernen wir, wenn es keinen Wert gibt, data- Dateneigenschaft aus der HTML-Vorlage. Viele Vorlagensprachen erlauben jedoch absichtlich keine Logik, die uns helfen kann, dieses Attribut vollständig hinzuzufügen oder nicht hinzuzufügen.

Stattdessen können wir es mit CSS lösen:

 [Data-Highlight]: Nicht ([datenhighlight = ""]) {
  Schriftgröße: 125%; 
}

[data-highlight = "product"] img {
  Ordnung: 1;
} 

Das obige ist der detaillierte Inhalt vonWählen Sie ein Element mit einem nicht leeren Attribut aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!