属性值选择器 II
Coddy CSS 选择器 课程的第 14 课，共 15 课。
在本课中，我们将探索属性值结尾选择器的概念。这种技术可以根据 HTML 元素属性值的最后几个字符来选中元素。
属性值结尾选择器语法：
要选中属性值以特定字符串结尾的元素，可以使用 [attribute$="value"] 选择器语法。
代码示例：
HTML：
<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>CSS：
/* 选中类属性值以 "-tertiary" 结尾的按钮 */
[class$="-tertiary"] {
background-color: lightcoral;
}在给出的代码示例中：
- 定义了三个按钮，它们的 class 属性值各不相同。
- CSS 规则
[class$="-tertiary"]会选中class属性值以 "-tertiary" 结尾的元素，并为这些按钮应用background-color: lightcoral;样式。
因此，class 属性值为 "btn-tertiary" 的按钮会显示浅珊瑚色背景。
挑战
简单网页上有一个音乐曲目列表。每首曲目都由一个 <div> 元素表示，其中的 data-track 属性用于指明曲目格式（例如，"mp3"、"wav"、"flac"）。你的任务是使用属性值后缀选择器，根据曲目格式为它们设置不同的样式。
你的 CSS 任务是：
- 为
data-track属性值以 "mp3" 结尾的曲目设置独特的背景。 - 为
data-track属性值以 "wav" 结尾的曲目设置独特的背景。 - 为
data-track属性值以 "flac" 结尾的曲目设置独特的背景。
亲手试试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Tracks</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<div data-track="a-mp3">Track 1 (MP3)</div>
<div data-track="a-wav">Track 2 (WAV)</div>
<div data-track="a-flac">Track 3 (FLAC)</div>
<div data-track="b-mp3">Track 4 (MP3)</div>
</body>
</html>
CSS 选择器中的所有课
自己练习： Web 在线编辑器