Photo by Ryunosuke Kikuno on Unsplash

CSS 屬性選擇器 (CSS Attribute selectors)

Nov 3, 2020 by Hsiangming Lo

CSS

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