极客笔记CSS 通配符选择器（*，^和$）用于类
在CSS中，选择器用于按类名、id、标签等选择元素。CSS中还有一些通配符选择器，我们可以使用它们来定义查询以选择HTML元素。
通配符选择器允许我们选择包含特定子字符串的HTML元素，例如类或id的值。在本教程中，我们将学习如何使用*，^和$通配符选择器来选择类和id。
CSS中的包含（*=）通配符选择器
包含（*=）通配符选择器允许开发人员找到所有属性值包含“string”作为子字符串的HTML元素。例如，使用class的“*”通配符选择器可以找到所有类名包含该字符串的HTML元素。
语法
用户可以按照下面的语法使用包含（*）通配符选择器来选择类。
[class*="string"] {
}
上述语法选择所有包含’class’的HTML元素名称中的’string’作为子字符串。
示例1
在下面的示例中，我们创建了四个不同的div元素，并根据其类名添加了文本。在CSS中，我们使用“contains”通配符选择器来选择所有类名中包含’string’作为子字符串的div元素。
输出中，用户可以观察到前两个div元素的文本颜色为红色，因为它们包含了类名中的’string’子字符串。
<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"] {
}
上述语法选择了所有class名称以’string’开头的HTML元素。
示例
在下面的示例中，我们使用了以（^=）通配符CSS选择器与class一起根据class名称选择元素。
在输出中，用户可以观察到第一个和第三个div元素的文本变为蓝色，因为它们的开始部分包含了’test’字符串。第二个div元素中的’test’出现在class名称的末尾，因此它不被以（^=）通配符选择器选择。
<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元素。
示例2
在下面的示例中，第2和第四个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>
示例3
在下面的示例中，我们使用以id结尾的CSS选择器，而不是使用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选择器来选择类。用户可以使用contains（*=）CSS选择器来获取属性值中包含子字符串的元素，使用starts with（^=）CSS选择器来获取属性值以子字符串开头的元素，以及使用ends with（$=）CSS选择器来获取属性值以子字符串结尾的元素。
此外，用户还学会了如何在最后一个示例中使用通配符CSS选择器与其他属性，比如使用id属性。