搜索

首页  >  文章  >  web前端  >  CSS中的通配符选择器（*、^和$）用于类

CSS中的通配符选择器（*、^和$）用于类

王林
王林转载
2023-09-04 09:57:111558浏览

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 元素。

示例

在下面的示例中，第二个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中文网其他相关文章！

声明：
本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除
上一篇：如何使用 CSS 设置动画的填充模式下一篇：如何指定应禁用输入元素？

相关文章

查看更多