在 CSS 中，选择器用于通过类名、id、标签等来选择元素。CSS 中还提供了一些通配符选择器，我们可以使用它们来定义选择 HTML 元素的查询。
通配符选择器允许我们选择在特定属性（例如 class 或 id）的值中包含特定子字符串的 HTML 元素。在本教程中，我们将学习使用 *、^ 和 $ 通配符选择器来表示类和 id。
包含 (*=) 通配符选择器允许开发人员查找属性值包含“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>
开头 (^=) 通配符选择器允许我们选择属性值以特定子字符串开头的所有 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>
如果特定属性值末尾包含子字符串，则以 ($=) 结尾的通配符选择器会选择所有 HTML 元素。例如，如果两个不同元素的类名是“onestart”和“lastone”，并且子字符串是“one”，则它将选择一个仅具有“lastone”类名的 HTML 元素，因为它包含第一个子字符串结尾。
用户可以按照以下语法对类使用结尾为 ($=) 通配符 CSS 选择器。
[class$="string"] {
}
上述语法选择类名以“string”子字符串结尾的所有 HTML 元素。
在下面的示例中，第二个nd 和第四个 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 选择器，而不是使用类作为属性。它演示了如何使用其他属性和通配符 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 选择器。用户可以使用 contains (*=) CSS 选择器来获取属性值中间包含子字符串的元素，使用 (^=) CSS 选择器获取属性值开头包含子字符串、以 ($ 结尾) 的元素。 =) 结束。
此外，用户还学习了如何将通配符 CSS 选择器与其他属性（例如上一个示例中的 id）结合使用。
以上是CSS中的通配符选择器（*、^和$）用于类的详细内容。更多信息请关注PHP中文网其他相关文章！
