在 CSS 中，选择器用于通过类名、id、标签等来选择元素。CSS 中还提供了一些通配符选择器，我们可以使用它们来定义选择 HTML 元素的查询。
通配符选择器允许我们选择在特定属性（例如 class 或 id）的值中包含特定子字符串的 HTML 元素。在本教程中，我们将学习使用 *、^ 和 $ 通配符选择器来表示类和 id。
CSS 中包含 (*=) 通配符选择器
包含 (*=) 通配符选择器允许开发人员查找属性值包含“string”作为子字符串的所有 HTML 元素。例如，对类使用“*”通配符选择器可查找类名包含该字符串的所有 HTML 元素。
语法
用户可以按照以下语法对类使用包含 (*) 通配符选择器。
[class*="string"] {
}
上述语法选择所有包含“string”作为类名中的子字符串的 HTML 元素。
立即学习“前端免费学习笔记（深入）”；
示例
在下面的示例中，我们创建了四个不同的 div 元素，并根据其类名称在其中添加了文本。在 CSS 中，我们使用“contains”通配符选择器来选择类名包含“test”作为子字符串的所有 div 元素。
在输出中，用户可以观察到前两个 div 元素的文本颜色为红色，因为它包含带有“test”子字符串的类名称。
Using the contains (*=) wildcard CSS selector in CSS.
This is a text with the class name test1.This is a text with the class name sampletest.This is a text with the class name demo test.This is a text with the class name element.
CSS 中以 (^=) 通配符选择器开头
开头 (^=) 通配符选择器允许我们选择属性值以特定子字符串开头的所有 HTML 元素。
语法
用户可以按照以下语法对类使用以通配符开头的选择器。
[class^="string"] {
}
以上语法选择类名以“string”开头的所有 HTML 元素。
基于 Internet 的 Web 技术，完全采用B/S 体系结构的网络办公系统。该系统具有安全性高、功能极为强大、可在广域网中使用也可在局域网中使用、也可以同时在局域网和广域网中使用的特点，全傻瓜式安装，无需作复杂配置，界面采用类似windows资源管理器的设计，结构清晰，条理分明，即使不熟悉电脑的人也可很快掌握全部操作。该系统通过在广域网内的广泛试用验证和经专业技术人员的调试、测试，确认具有很
示例
在下面的示例中，我们使用了以 (^=) 开头的通配符 CSS 选择器和类来根据类名称选择元素。
在输出中，用户可以观察到第一个和第三个 div 元素的文本变成蓝色，因为它在开头包含“test”字符串。第二个 div 元素在类名中包含“test”，但它位于类名的末尾，因此不会被开头 (^=) 通配符选择器选中。
Using the starts with (^=) wildcard CSS selector in CSS
This is a text with the class name test1.This is a text with the class name sampletest.This is a text with the class name testdemo test.This is a text with the class name element.
CSS 中以 ($=) 通配符选择器结尾
如果特定属性值末尾包含子字符串，则以 ($=) 结尾的通配符选择器会选择所有 HTML 元素。例如，如果两个不同元素的类名是“onestart”和“lastone”，并且子字符串是“one”，则它将选择一个仅具有“lastone”类名的 HTML 元素，因为它包含第一个子字符串结尾。
语法
用户可以按照以下语法对类使用结尾为 ($=) 通配符 CSS 选择器。
[class$="string"] {
}
上述语法选择类名以“string”子字符串结尾的所有 HTML 元素。
示例
在下面的示例中，第二个nd 和第四个 div 元素在类名称值的末尾包含“test”子字符串。我们使用结尾带有 ($=) 通配符的 CSS 选择器来选择两个 div 元素并对其应用边框、边距和填充。
Using the ends with ($=) wildcard CSS selector in CSS.
This is a text with the class name test1.This is a text with the class name sampletest.This is a text with the class name testdemo test.This is a text with the class name elementtest.
示例
在下面的示例中，我们使用 id 结尾的 CSS 选择器，而不是使用类作为属性。它演示了如何使用其他属性和通配符 CSS 选择器来选择 HTML 元素。
在这里，我们选择 id 值末尾包含“name”的所有 HTML 元素，并更改字体样式和颜色。
Using the ends with ($=) wildcard CSS selector in CSS.
id == firstnameid == lastnameid == ageid == namestart
用户学会了如何使用类的通配符 CSS 选择器。用户可以使用 contains (*=) CSS 选择器来获取属性值中间包含子字符串的元素，使用 (^=) CSS 选择器获取属性值开头包含子字符串、以 ($ 结尾) 的元素。 =) 结束。
此外，用户还学习了如何将通配符 CSS 选择器与其他属性（例如上一个示例中的 id）结合使用。
