属性值选择器 III

Coddy CSS 选择器课程的第 15 课，共 15 课。

在本课中，我们将了解属性值包含选择器的概念。这种技术可以根据 HTML 元素的属性值是否包含特定子字符串来选中元素。

属性值包含选择器语法：

要选中属性值包含特定字符串的元素，可以使用 [attribute*="value"] 选择器语法。

代码示例：

HTML：

<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>

CSS：

/* 选中 class 属性值包含 "fruit" 的 <div> 元素 */
[class*="fruit"] {
   color: green;
}

代码示例说明：

在给出的代码示例中：

定义了 5 个 <div> 元素，它们的 class 属性值各不相同。
CSS 规则 [class*="fruit"] 会选中 class 属性值包含子字符串 "fruit" 的元素，并将 color: green; 样式应用于这些元素。

因此，class 属性值为 "tag fruit" 的 <div<strong>></strong> 元素会显示绿色文字。

挑战

简单

你需要为网页上的产品列表设置样式。每个产品都由一个 <div> 元素表示，该元素带有一个 data-tags 属性，用于标明产品标签（例如 "electronics"、"clothing"、"accessories"）。你的目标是使用属性值包含选择器，根据标签为产品设置不同的样式。

你的 CSS 任务是：

为 data-tags 属性包含 "electronics" 的产品设置独特的背景颜色。
为 data-tags 属性包含 "clothing" 的产品设置独特的边框。
为 data-tags 属性包含 "accessories" 的产品设置独特的背景颜色。

亲手试试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product List</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-tags="electronics">Smartphone</div>
    <div data-tags="clothing">T-Shirt</div>
    <div data-tags="accessories">Sunglasses</div>
    <div data-tags="electronics clothing">Headphones</div>
</body>
</html>

CSS 选择器中的所有课

1CSS 选择器简介

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

4属性选择器

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

2简单选择器

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

3组合选择器

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

自己练习： Web 在线编辑器