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+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始
广告