CSS 属性选择器

为带有特定属性的 HTML 元素设置样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

CSS [attribute] Selector

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 元素；

ຄວາມຄິດຫາ

a[target] {
  background-color: yellow;
}

ສອບສວນດຽວວ່າຕອນນັ້ນ

CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 元素：

ຄວາມຄິດຫາ

a[target="_blank"] { 
  background-color: yellow;
}

ສອບສວນດຽວວ່າຕອນນັ້ນ

CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 "flower" 单词的所有元素：

ຄວາມຄິດຫາ

[title~="flower"] {
  border: 5px solid yellow;
}

ສອບສວນດຽວວ່າຕອນນັ້ນ

上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

CSS [attribute|="value"] 选择器

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

ບົດສະຫຼຸບນີ້ໄດ້ເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມ class ທີ່ເລີ່ມດ້ວຍ "top":

注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

ຄວາມຄິດຫາ

[class|="top"] {
  background: yellow;
}

ສອບສວນດຽວວ່າຕອນນັ້ນ

CSS [attribute^="value"] ຄວາມຄິດຫາ

[attribute^="value"] ຄວາມຄິດຫາການເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມທີ່ເລີ່ມດ້ວຍຄຳເວົ້າສະເພາະ.

ບົດສະຫຼຸບນີ້ໄດ້ເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມ class ທີ່ເລີ່ມດ້ວຍ "top":

ຄຳແນະນຳ:ຄວາມຜູ້ຕິດຕາມບໍ່ຕ້ອງມີຄຳເວົ້າທັງໝົດນັ້ນ!

ຄວາມຄິດຫາ

[class^="top"] {
  background: yellow;
}

ສອບສວນດຽວວ່າຕອນນັ້ນ

CSS [attribute$="value"] ຄວາມຄິດຫາ

[attribute$="value"] ຄວາມຄິດຫາການເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມທີ່ສິ້ນສຸດດ້ວຍຄຳເວົ້າສະເພາະ.

ບົດສະຫຼຸບນີ້ໄດ້ເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມ class ທີ່ສິ້ນສຸດດ້ວຍ "test":

ຄຳແນະນຳ:ຄວາມຜູ້ຕິດຕາມບໍ່ຕ້ອງມີຄຳເວົ້າທັງໝົດນັ້ນ!

ຄວາມຄິດຫາ

[class$="test"] {
  background: yellow;
}

ສອບສວນດຽວວ່າຕອນນັ້ນ

CSS [attribute*="value"] ຄວາມຄິດຫາ

[attribute*="value"] ຄວາມຄິດຫາການເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມທີ່ບັນຍາວໄດ້ຄຳເວົ້າສະເພາະ.

ບົດສະຫຼຸບນີ້ໄດ້ເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມ class ທີ່ບັນຍາວໄດ້ "te":

ຄຳແນະນຳ:ຄວາມຜູ້ຕິດຕາມບໍ່ຕ້ອງມີຄຳເວົ້າທັງໝົດນັ້ນ!

ຄວາມຄິດຫາ

[class*="te"] {
  background: yellow;
}

ສອບສວນດຽວວ່າຕອນນັ້ນ

ກະຈາຍຮູບແບບຟອມຂໍ້ມູນ

ຖ້າພວກເຈົ້າຕ້ອງກະຈາຍຮູບແບບຟອມຂໍ້ມູນທີ່ບໍ່ມີ class ຫຼື id，ຄວາມຄິດຫາຄົ້ນຄວ້າຈະມີຫຼາຍຄວາມສະອາດ:

ຄວາມຄິດຫາ

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

ສອບສວນດຽວວ່າຕອນນັ້ນ

ຄຳແນະນຳ:ຍັງມີການຢ້ຽມຢາມພວກເຮົາ ຄູ່ມູນກະຈາຍ CSS ຟອມຂໍ້ມູນ،ສຶກສາຫຼາຍກວ່ານັ້ນໃນການກະຈາຍຮູບແບບຟອມຂໍ້ມູນ。

ຄວາມຄິດຫາຄົ້ນຄວ້າທັງໝົດຂອງ CSS

ຄວາມຄິດຫາຄົ້ນຄວ້າ ຄວາມຄິດຫາ ຄວາມຄິດຫາພາບພິມ
[attribute] [target] ເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມ target。
[attribute=value] [target=_blank] ເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມ target="_blank"。
[attribute~=value] [title~=flower] ເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມ title ທີ່ບັນຍາວໄດ້ "flower"。
[attribute|=value] [lang|=en] ເລືອກປະກອບທີ່ມີຄວາມຜູ້ຕິດຕາມ lang ທີ່ເລີ່ມດ້ວຍ "en"。
[attribute^=value] a[href^="https"] ເລືອກປະກອບ <a> ທີ່ມີຄວາມຜູ້ຕິດຕາມ href ທີ່ເລີ່ມດ້ວຍ "https"。
[attribute$=value] a[href$=".pdf"] ເລືອກປະກອບ <a> ທີ່ມີຄວາມຜູ້ຕິດຕາມ href ທີ່ສິ້ນສຸດດ້ວຍ ".pdf"。
[attribute*=value] a[href*="codew3c"] Select each <a> element whose href attribute value contains the substring "codew3c".

延伸阅读

课外书：CSS Attribute Selector Explanation