選擇具有非空屬性的元素

使用CSS選擇器選擇具有非空屬性的元素

簡短答案：

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

詳細解釋： (結論相同，只是解釋了為什麼我們需要這樣做)

假設您有一個使用特殊data-屬性進行樣式設置的元素：

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

您想定位該元素，並在高亮顯示時執行特殊操作。

 [data-highlight] {
  font-size: 125%; 
}

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

該data-屬性是模板的一部分，因此它可以具有您設置的任何值。

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

有時沒有值！因此輸出的HTML是：

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

但這可能很棘手。請參見上面第一個CSS代碼塊，我們想要定位所有具有data-highlight屬性的元素，但是，我們實際上只希望在它有值時才這樣做。如果值為空，我們只想跳過任何特殊樣式。

在理想情況下，當沒有值時，我們只需從HTML模板中刪除data-屬性。但是許多模板語言故意不允許使用可以幫助我們完全添加或不添加該屬性的邏輯。

相反，我們可以使用CSS解決它：

 [data-highlight]:not([data-highlight=""]) {
  font-size: 125%; 
}

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

以上是選擇具有非空屬性的元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！