6.1 属性选择器的种类
CSS 中的属性选择器 允许根据属性的存在、值或部分属性值来选择元素。它们为 HTML 元素的样式提供了灵活而强大的功能，使其在处理动态内容和交互式网页时特别有用。
属性选择器的种类
- 属性选择器 (Attribute Selector)
- 具有值的属性选择器 (Attribute Selector with Value)
- 以指定值开头的属性选择器 (Attribute Selector with Prefix)
- 以指定值结尾的属性选择器 (Attribute Selector with Suffix)
- 包含指定值的属性选择器 (Attribute Selector with Substring)
- 带有空格分隔的属性选择器 (Attribute Selector with Whitespace)
- 带有连字符分隔的属性选择器 (Attribute Selector with Hyphen)
6.2 属性选择器
属性选择器选择 具有指定属性 的元素，而不考虑其值。
语法：
[属性] {
属性: 值;
属性: 值;
}
例子：
CSS
/* 选择所有具有 title 属性的元素 */
[title] {
color: blue;
}
HTML
<p title="这是标题">这段文字将是蓝色的。</p>
<p>这段文字不会是蓝色的。</p>
6.3 具有值的属性选择器
具有值的属性选择器选择 属性具有指定值 的元素。
语法：
[属性="值"] {
属性: 值;
属性: 值;
}
例子：
CSS
/* 选择所有 title 属性为 "例子" 的元素 */
[title="例子"] {
color: green;
}
HTML
<p title="例子">这段文字将是绿色的。</p>
<p title="另一个例子">这段文字不会是绿色的。</p>
6.4 以指定值开头的属性选择器
以指定值开头的属性选择器选择属性以指定值开头的元素。
语法：
[属性^="值"] {
属性: 值;
属性: 值;
}
例子：
CSS
/* 选择所有 title 属性以 "开始" 开头的元素 */
[title^="开始"] {
color: red;
}
HTML
<p title="开始文本">这段文字将是红色的。</p>
<p title="不是开始">这段文字不会是红色的。</p>
6.5 以指定值结尾的属性选择器
以指定值结尾的属性选择器选择属性以指定值结尾的元素。
语法：
[属性$="值"] {
属性: 值;
属性: 值;
}
例子：
CSS
/* 选择所有 title 属性以 "结束" 结尾的元素 */
[title$="结束"] {
color: orange;
}
HTML
<p title="这是结束">这段文字将是橙色的。</p>
<p title="这是开始">这段文字不会是橙色的。</p>
6.6 包含子字符串的属性选择器
包含子字符串的属性选择器选择属性包含指定值的元素。
语法：
[属性*="值"] {
属性: 值;
属性: 值;
}
例子：
CSS
/* 选择所有 title 属性包含 "中间" 的元素 */
[title*="中间"] {
color: purple;
}
HTML
<p title="这是中间文本">这段文字将是紫色的。</p>
<p title="这里没有中间">这段文字不会是紫色的。</p>
6.7 带空格分隔的属性选择器
带空格分隔的属性选择器选择属性含有一个或多个由空格分隔的值的元素。对于选择具有特定类或角色的元素很有用。
语法：
[属性~="值"] {
属性: 值;
属性: 值;
}
例子：
CSS
/* 选择所有 class 属性列表中含有 "highlight" 的元素 */
[class~="highlight"] {
background-color: yellow;
}
HTML
<p class="highlight special">这段文字将有黄色背景。</p>
<p class="special highlight">这段文字也将有黄色背景。</p>
<p class="special">这段文字不会有黄色背景。</p>
6.8 带连字符分隔的属性选择器
带连字符分隔的属性选择器选择包含指定值或以指定值开头，随后是连字符的元素。
语法：
[属性|="值"] {
属性: 值;
属性: 值;
}
例子：
CSS
p[lang|="ru"] {
font-style: italic;
}
HTML
<p lang="ru">这段文字将是斜体。</p>
<p lang="ru-RU">这段文字也将是斜体。</p>
<p lang="en">This text will not be italicized.</p>
GO TO FULL VERSION