CSS 属性选择器学习笔记

概述

在CSS中，属性选择器用于选择具有特定属性或属性值的元素。属性选择器可以与其他选择器（如类型选择器、类选择器或ID选择器）组合使用以更精确地选择元素。

基本语法

属性选择器包括以下几种：

1. [attribute]：选择具有指定属性的元素。
2. [attribute=value]：选择具有指定属性和属性值的元素。
3. [attribute~=value]：选择具有指定属性且属性值包含指定词汇的元素。
4. [attribute|=value]：选择具有指定属性且属性值以指定值开头（即可作为前缀）的元素。
5. [attribute^=value]：选择具有指定属性且属性值以指定值开头的元素。
6. [attribute$=value]：选择具有指定属性且属性值以指定值结尾的元素。
7. [attribute*=value]：选择具有指定属性且属性值包含指定值的元素。

实例

假设有如下HTML代码：

Copy Code
<ul>
  <li class="item1">item 1</li>
  <li class="item2">item 2</li>
  <li class="item3" data-id="3">item 3</li>
  <li class="item4" data-id="4" data-color="red">item 4</li>
  <li class="item5" data-id="5" data-color="blue">item 5</li>
</ul>

以下是一些基本的属性选择器示例：

1. 选择具有 data-id 属性的元素（例如第三个 li 元素）：[data-id]
2. 选择 data-color 属性为 red 的元素（例如第四个 li 元素）：[data-color=red]
3. 选择 class 属性包含 item 的元素（例如第一个到第五个 li 元素）：[class*=item]
4. 选择 class 属性以 item 开头的元素（例如第一个到第三个 li 元素）：[class^=item]
5. 选择 class 属性以 2 结尾的元素（例如第二个 li 元素）：[class$=2]
6. 选择 data-color 属性包含 e 的元素（例如第四个和第五个 li 元素）：[data-color*=e]