CSS3中新增了一些属性选择器,用于根据元素的属性值选择元素。以下是一些常用的CSS3属性选择器:
1. [attr]:选择具有指定属性的元素。
[required] {
border: 1px solid red;
}
2. [attr=value]:选择属性值等于特定值的元素。
[type="text"] {
background-color: lightblue;
}
3. [attr~=value]:选择属性值中包含指定词汇的元素。
[class~="button"] {
font-weight: bold;
}
4. [attr|=value]:选择属性值以特定值开头的元素,可用于匹配语言代码。
[lang|="en"] {
color: blue;
}
5. [attr^=value]:选择属性值以特定值开头的元素。
[href^="https://"] {
color: green;
}
6. [attr$=value]:选择属性值以特定值结尾的元素。
[src$=".jpg"] {
border: 1px solid black;
}
7. [attr*=value]:选择属性值中包含特定子字符串的元素。
[title*="flower"] {
background-color: pink;
}
这些属性选择器可以帮助你更精确地选择和样式化文档中的元素。