CSS 屬性選擇器 (CSS Attribute selectors)

by Hsiangming Lo

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