数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中的通配符选择器（*, ^ 和 $）用于类
CSS 通配符选择器允许我们选择 HTML 元素，该元素在特定属性（例如类、id 或其他属性）的值中包含特定子字符串。当样式应用于多个元素且其属性具有共同模式时，这很有用。
在本文中，我们将学习 CSS 中的通配符选择器及其类型，如下所述。
包含（*=）通配符选择器
CSS 包含（*=）通配符选择器查找其属性值包含指定子字符串的所有 HTML 元素。当您希望选择属性值中任何位置都包含指定子字符串的元素时，这很有用。
- 我们创建了四个div 元素，其文本内容与其类名相对应。
- 在 CSS 中，我们使用了“class*="test"”来选择所有类名包含“test”作为子字符串的 div 元素。
- 然后，我们使用了颜色和字体大小属性来更改所选 div 元素的文本颜色和字体大小。
示例
这是一个使用包含（*=）通配符选择器实现上述步骤以更改 div 元素的文本颜色和字体大小的示例代码。
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[class*="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Contains (*=)
</strong> wildcard selector to change the text color
and increase the font size of div element.
</p>
<div class="test1">
This is a div with the class name test1.
</div>
<div class="sampletest">
This is a div with the class name sampletest.
</div>
<div class="demo">
This is a div with the class name demo.
</div>
<div class="element">
This is a div with the class name element.
</div>
</body>
</html>
以（^=）通配符选择器开头
CSS 以（^=）开头通配符选择器查找其属性值以指定子字符串开头的所有 HTML 元素。当您希望选择属性值以特定字符串开头的元素时，这很有用。
- 我们创建了四个 div 元素，其文本内容与其类名相对应。
- 在 CSS 中，我们使用了“class^="test"”来选择所有类名以“test”作为子字符串开头的 div 元素。
- 然后，我们使用了颜色和边框属性来更改文本颜色并为所选 div 元素添加边框。
示例
这是一个使用以（^=）开头通配符选择器实现上述步骤以更改 div 元素的文本颜色和字体大小的示例代码。
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[class^="test"] {
color: #04af2f;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Starts with(^=)
</strong> wildcard selector to change the text color
and add the border to div element.
</p>
<div class="test1">
This is a div with the class name test1.
</div>
<div class="sampletest">
This is a div with the class name sampletest.
</div>
<div class="testdemo">
This is a div with the class name test demo.
</div>
<div class="element">
This is a div with the class name element.
</div>
</body>
</html>
以（$=）通配符选择器结尾
CSS 以（$=）结尾通配符选择器查找其属性值以指定子字符串结尾的所有 HTML 元素。当您希望选择属性值以特定字符串结尾的元素时，这很有用。
- 我们创建了四个 div 元素，其文本内容与其 id 名字相对应。
- 在 CSS 中，我们使用了“id$="test"”来选择所有 id 以“test”作为子字符串结尾的 div 元素。
- 然后，我们使用了颜色和字体大小属性来更改所选 div 元素的文本颜色和字体大小。
示例
这是一个使用以（$=）结尾通配符选择器实现上述步骤以更改 div 元素的文本颜色和字体大小的示例代码。
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[id$="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Ends with ($=)
</strong> wildcard selector to change the text color
and increase the font size of div element.
</p>
<div id="test1">
This is a div with the id name test1.
</div>
<div id="sampletest">
This is a div with the id name sampletest.
</div>
<div id="testdemo">
This is a div with the id name test demo.
</div>
<div id="elementtest">
This is a div with the id name element test.
</div>
</body>
</html>
结论
在本文中，我们学习并了解了类别的通配符 CSS 选择器及其使用方法。我们可以使用包含（*=）CSS 选择器获取属性值包含子字符串的元素，使用以（^=）开头CSS 选择器获取属性值开头包含子字符串的元素，以及使用以（$=）结尾CSS 选择器获取属性值结尾包含子字符串的元素。
更新于： 2024年8月14日
11K+ 次浏览
广告