CSS 屬性選擇器 (CSS Attribute selectors)

在寫css時,有時會需要選擇有特定屬性的元素,像是元素中有某個data-value,或是連結中某個特定的網域...等,都可以用CSS 屬性選擇器來選擇元素。

<style>
  // 連結中有href屬性的元素
  a[href] {}

  // 連結的href屬性值,等於https://的元素
  a[href = "https://"] {}

  // 連結的href屬性值,包含https://的元素
  a[href *= "https://"] {}

  // 連結的href屬性值,開頭為https://的元素
  a[href ^= "https://"] {}

  // 連結的href屬性值,結尾為https://的元素
  a[href $= "https://"] {}

  // 連結的href屬性值,經空格分開值中符合https://的元素
  a[href ~= "https://"] {}
</style>

這個網誌中的熱門文章

SwiftUI設定深色模式

從零開始設置建立Next.js網站所需環境 (macOS)

AOS 基本使用方法 (javascript 捲軸動畫)