CSS 屬性選擇器 (CSS Attribute selectors)

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

{code}

<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>

{/code}

這個網誌中的熱門文章

SwiftUI設定深色模式

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