属性值选择器

Coddy CSS 选择器课程的第 13 课，共 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：

/* 选中 class 属性值以 "btn-" 开头的按钮 */
[class^="btn-"] {
   background-color: lightgray;
}

在提供的代码示例中：

定义了三个按钮，它们的 class 属性值各不相同。
CSS 规则 [class^="btn-"] 会选中 class 属性值以 "btn-" 开头的元素，并为这些按钮应用 background-color: lightgray; 样式。

结果是，三个按钮都会有浅灰色背景，因为它们的 class 属性值都以 "btn-" 开头。

挑战

简单

假设你有以下列表项的 HTML 结构。你的目标是使用 CSS 为 data-category 属性值以 "fruit-" 开头的列表项设置样式。为这些列表项应用独特的背景颜色。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Value Starting With Selector</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <ul>
        <li data-category="fruit-apple">Apple</li>
        <li data-category="vegetable-carrot">Carrot</li>
        <li data-category="fruit-banana">Banana</li>
        <li data-category="fruit-orange">Orange</li>
        <li data-category="grain-rice">Rice</li>
    </ul>
</body>
</html>

CSS 选择器中的所有课

1CSS 选择器简介

CSS 选择器的作用为什么它们很重要？

4属性选择器

属性选择器简介存在性和值完全匹配属性值选择器属性值选择器 II 属性值选择器 III

2简单选择器

类型选择器类选择器 ID 选择器通用选择器

3组合选择器

子选择器后代选择器相邻兄弟选择器通用兄弟选择器

自己练习： Web 在线编辑器