CSS 属性选择器允许你选择具有特定属性值的元素。这使得你可以根据元素的属性来应用样式。以下是一些常见的 CSS 属性选择器:

1. [attr]:

选择具有指定属性的所有元素,不论属性的值是什么。
/* 选择所有具有 title 属性的元素 */
[target] {
  color: red;
}

2. [attr=value]:

选择具有指定属性值的元素。
/* 选择所有 title 属性值为 "example" 的元素 */
[target="example"] {
  font-weight: bold;
}

3. [attr~=value]:

选择具有指定属性值的元素,其中属性值是空格分隔的词列表,且其中至少有一个词等于指定的值。
/* 选择所有 title 属性值包含 "example" 的元素 */
[target~="example"] {
  text-decoration: underline;
}

4. [attr|=value]:

选择具有指定属性值的元素,其中属性值是指定值或以指定值开头,后面紧跟一个连字符(-)。
/* 选择所有 lang 属性值为 "en" 或以 "en-" 开头的元素 */
[lang|="en"] {
  color: blue;
}

5. [attr^=value]:

选择具有以指定值开头的属性值的元素。
/* 选择所有 src 属性值以 "https" 开头的图片元素 */
[src^="https"] {
  border: 1px solid green;
}

6. [attr$=value]:

选择具有以指定值结尾的属性值的元素。
/* 选择所有 href 属性值以 ".pdf" 结尾的链接元素 */
[href$=".pdf"] {
  color: red;
}

7. [attr*=value]:

选择具有包含指定值的属性值的元素。
/* 选择所有 alt 属性值包含 "cat" 的图片元素 */
[alt*="cat"] {
  width: 100px;
}

这些属性选择器可以用于根据元素的具体属性值选择符合条件的元素,并为其应用样式。使用这些选择器时要注意兼容性,并确保它们符合你的设计需求。


转载请注明出处:http://www.zyzy.cn/article/detail/4020/CSS