CSS 中用于类的通配符选择器(*、^ 和 $)
在 CSS 中，选择器用于按类名、ID、标签等选择元素。CSS 中也有一些通配符选择器，我们可以用它们来定义查询来选择 HTML 元素。
通配符选择器允许我们选择特定属性(例如 class 或 id)值中包含特定子字符串的 HTML 元素。在本教程中，我们将学习如何使用 *、^ 和 $ 通配符选择器来选择类和 id。
CSS 中的包含 (*=) 通配符选择器
包含 (*=) 通配符选择器允许开发人员查找所有属性值包含"string"作为子字符串的 HTML 元素。例如，将"*"通配符选择器与类名一起使用，可查找类名包含该字符串的所有 HTML 元素。
语法
用户可以按照以下语法对类使用包含 (*) 通配符选择器。
[class*="string"] {
}
上述语法选择所有类名包含"string"作为子字符串的 HTML 元素。
示例
在下面的示例中，我们创建了四个不同的 div 元素，并根据其类名在其中添加了文本。在 CSS 中，我们使用"contains"通配符选择器选择所有类名包含"test"作为子字符串的 div 元素。
在输出中，用户可以观察到前两个 div 元素的文本颜色为红色，因为它包含带有"test"子字符串的类名。
<html>
<head>
<style>
[class*="test"] {
color: red;
font-size: 2rem;
}
</style>
</head>
<body>
<h2> Using the <i> contains (*=) </i> wildcard CSS selector in CSS. </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "demo"> This is a text with the class name demo test. </div>
<div class = "element"> This is a text with the class name element.</div>
</body>
</html>
CSS 中的以 (^=) 开头的通配符选择器
以 (^=) 开头的通配符选择器允许我们选择所有属性值以特定子字符串开头的 HTML 元素。
语法
用户可以按照以下语法对类使用以 (^=) 开头的通配符选择器。
[class^="string"] {
}
上述语法选择所有类名以"string"开头的 HTML 元素。
示例
在下面的示例中，我们将以 (^=) 开头的通配符 CSS 选择器与类一起使用，根据类名选择元素。
在输出中，用户可以观察到第一个和第三个 div 元素的文本变为蓝色，因为它们的开头包含"test"字符串。第二个 div 元素的类名中包含"test"，但是它位于类名的末尾，因此它不会被以 (^=) 开头的通配符选择器选中。
<html>
<head>
<style>
[class^="test"] {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Using the <i> starts with (^=) </i> wildcard CSS selector in CSS </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "element"> This is a text with the class name element. </div>
</body>
</html>
CSS 中以 ($=) 结尾的通配符选择器
如果特定属性值的末尾包含子字符串，则以 ($=) 结尾的通配符选择器会选择所有 HTML 元素。例如，如果两个不同元素的类名分别为"onestart"和"lastone"，且子字符串为"one"，则它将选择仅包含"lastone"类名的 HTML 元素，因为它末尾包含一个子字符串。
语法
用户可以按照以下语法使用以 ($=) 结尾的通配符 CSS 选择器来选择类。
[class$="string"] {
}
上述语法选择所有类名以"string"子字符串结尾的 HTML 元素。
示例
在下面的示例中，第二个和第四个 div 元素的类名值末尾包含"test"子字符串。我们使用了结尾带有 ($=) 通配符的 CSS 选择器来选中这两个 div 元素，并对它们应用了边框、外边距和内边距。
<html>
<head>
<style>
[class$="test"] {
border: 2px solid pink;
padding: 5px 10px;
margin: 5px;
}
</style>
</head>
<body>
<h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "elementtest"> This is a text with the class name elementtest. </div>
</body>
</html>
示例
在下面的示例中，我们将 id 与 CSS 选择器中的 ends with 一起使用，而不是将 class 作为属性使用。它演示了如何将其他属性与通配符 CSS 选择器结合使用来选择 HTML 元素。
在这里，我们选择所有 id 值末尾包含"name"的 HTML 元素，并更改字体样式和颜色。
<html>
<head>
<style>
[id$="name"] {
color: lightskyblue;
font-style: italic;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div id = "firstname"> id == firstname </div>
<div id = "lastname"> id == lastname </div>
<div id = "age"> id == age </div>
<div id = "namestart"> id == namestart </div>
</body>
</html>
用户学习了如何使用通配符 CSS 选择器来选择类。用户可以使用包含 (*=) CSS 选择器来获取属性值中间包含子字符串的元素，使用以 (^=) CSS 选择器来获取属性值开头包含子字符串的元素，以及使用 ($=) CSS 选择器来获取属性值结尾包含子字符串的元素。
此外，用户还在上一个示例中学习了如何将通配符 CSS 选择器与其他属性(例如 id)结合使用。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
