属性名称选择 - Html

在HTML中，我们可以使用属性名称选择器（Attribute Selectors）来选择具有特定属性的元素。属性选择器用于选取带有指定属性的元素，可以根据属性的值来选择元素。

语法

属性名称选择器使用方括号[]来定义属性的名称和值。语法为：

[attribute=value]

• attribute：属性名称。
• value：属性值。

属性名称选择器也可以用于选择不同的属性属性值。语法为：

[attribute!=value]

属性名称选择器还可以用于选择以某个属性值开头的元素。语法为：

[attribute^=value]

还可以用于选择以某个属性值结尾的元素。语法为：

[attribute$=value]

也可以用于选择包含某个属性值的元素。语法为：

[attribute*=value]

以上所有语法都可以与多个属性或属性值一起使用。

实例

我们来看一个网页的 HTML 代码，下面的代码表示一个列表元素：

<ul>
  <li data-id="1">Apple</li>
  <li data-id="2">Banana</li>
  <li data-id="3">Cherry</li>
  <li data-id="4">Donut</li>
</ul>

1. 选取所有具有 data-id 属性的 li 元素：

li[data-id] {
  color: blue;
}

2. 选取 data-id 属性值为 2 的 li 元素：

li[data-id="2"] {
  color: red;
}

3. 选取 data-id 属性值不为 2 的 li 元素：

li[data-id!="2"] {
  color: green;
}

4. 选取 data-id 属性值以 1 开头的 li 元素：

li[data-id^="1"] {
  font-weight: bold;
}

5. 选取 data-id 属性值以 4 结尾的 li 元素：

li[data-id$="4"] {
  text-decoration: underline;
}

6. 选取 data-id 属性值包含 3 的 li 元素：

li[data-id*="3"] {
  text-shadow: 1px 1px gray;
}

总结

属性名称选择器是一种强大的选择器，可以帮助我们根据元素的属性来选择相应的元素，它可以帮助我们更加灵活地操作HTML元素，为我们的设计和布局提供更多的可能性。