CSS Wildcard

2025年1月22日 | 阅读 6 分钟

概述

我们都熟悉在网页或网站开发中可用的几种选择器。然而，我们都了解它们吗？如果我们的答案是“不”，那也没关系；这是可以接受的。尽管如此，作为开发人员，我们有责任尽一切可能学习各种选择器。

理解各种 CSS 属性只会让我们的工作更轻松、更快。最终，你可能会发现自己被困在一个页面或网站上，不知道该怎么办；后来，当你搜索解决方案时，你会发现，如果你了解一些基本的 CSS 通配符的 CSS 基本特征，这个问题其实非常容易解决。因此，我们将在本文中讨论选择器，一个非常重要的特性。

顾名思义，选择器用于选择我们网站或网页上的项目。它们本质上是惰性的。选择器让我们选择要选择的项目，然后对这些选定的组件应用某些操作。尽管选择器看起来很简单，但理解它们至关重要，因为如果使用不正确，我们的代码可能会被破坏，我们所有的辛勤工作都将白费。因此，我们必须在付诸实践之前充分理解该属性。

如果我们没有足够的专业知识就开始实施一个属性，我们可能会遇到一些严重的后果。

含义和应用

既然我们了解了选择器的重要性，那么我们来讨论一种特定类型的选择器，称为通配符选择器（*、^ 和 $）如何？对于那些

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

CSS 中使用选择器根据类名、id、标签等属性选择项目。我们还可以通过使用 CSS 中可用的一些通配符选择器来构建查询以选择 HTML 组件。

我们可以通过使用通配符选择器选择具有指定子字符串的 HTML 元素，该子字符串包含在属性（如 class 或 id）的值中。本文将讨论 *、^ 和 $ 通配符选择器在类和 id 中的使用。

语法

[attribute*="value"] {
    // Property of CSS
}

CSS 中包含通配符选择器 (*=)。

开发人员可以使用包含 (*=) 通配符选择器查找所有属性值中包含“string”子字符串的 HTML 元素。例如，当我们对 class 使用“*”通配符选择器时，它会查找所有 class 名称中包含该字符串的 HTML 元素。

语法

用户可以按照以下指南使用包含 (*) 通配符选择器进行类选择。

 
[class*="string"] {
}

上述方法选择所有类名中包含“string”子字符串的 HTML 元素。

例如

下面示例中的四个不同的 div 组件根据它们的类名放置了文本。为了选择所有类名中包含“test”子字符串的 div 组件，我们使用了 CSS 的“contains”通配符选择器。

用户可以看到，输出中前两个 div 元素的内容显示为红色，因为它们包含类名和子字符串“test”。

HTML 代码

<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <p>Example by using the <b> contains (*=) </b> wildcard CSS selector in CSS. </p>
   <div class = "main1"> <h1>This text belongs to the main1 class.</h1></div>
   <div class = "main"><h1> This text belongs to the main class.</h1> </div>
   <div class="example"> This section uses an example of a class name. </div>
   <div class="CSS"> This section uses an example of a class name CSS.</div>
</body>
</html>
CSS code
body{
  padding: 25px;
}
.CSS {
color: green;
}
.example{
  color:green;
}
.main {
  color:green;
}
.main1 {
  color:green;
}

输出

以 CSS 通配符选择器开头 (^=)。

我们可以使用以 (^=) 通配符选择器开头，选择所有属性值以指定子字符串开头的 HTML 元素。

语法

要对类使用以通配符选择器开头，用户可以遵循下面列出的语法。

[class^="string"] {
} 

所有类名以“string”开头的 HTML 元素都由上述语法选择。

示例

在下面的示例中，我们使用以 (^=) 通配符 CSS 选择器开头的类，根据类名选择了项目。

用户可以在结果中看到，由于第一个和第三个 div 元素包含以“test”开头的字符串，因此它们的文本变为蓝色。第二个 div 元素中存在类名“test”，但因为它出现在类名的末尾，所以以 (^=) 通配符选择器开头不会选择它。

<html>
<head>
   <style>
      [class^="main"] {
         color: red;
         font-weight: italic;
      }
   </style>
</head>
<body>
   <h3>Example using the <i> starts with (^=) </i> wildcard CSS selector </h3>
   <div class = "main"> This text belongs to the main class.</div>
   <div class = "example"> This section uses an example of a class name. </div>
   <div class = "test"> This text belongs to the test class. </div>
   <div class = "CSS"> This text belongs to the CSS class. </div>
</body>
</html>

输出

以 CSS 通配符选择器结尾 ($=)

如果某个特定属性值末尾有子字符串，则使用以 ($=) 通配符选择器结尾来选择所有 HTML 元素。例如，如果两个独立的元素具有类名“onestart”和“lastone”，并且子字符串是“one”，它将只选择具有类名“lastone”的 HTML 元素，因为它末尾包含一个子字符串。

语法

用户可以使用此语法来使用以 ($=) 通配符 CSS 选择器结尾对类进行选择。

[class$="string"] {
}

所有类名以子字符串“string”结尾的 HTML 元素都由上述语法选择。

示例

在下面示例的第二个和第四个 div 元素中，子字符串“test”出现在类名值的末尾。我们使用以 ($=) 通配符 CSS 选择器结尾选择了这两个 div 元素，并为它们应用了边框、外边距和内边距。

<html>
<head>
   <style>
      [class$="demo"] {
         border: 3px solid blue;
         padding: 5px 15px;
         margin: 7px;
      }
   </style>
</head>
<body>
   <h2>By using <i>which ends with ($=)</i> wildcard CSS selector in CSS.</h2>
   <div class = "main"> This text belongs to the class main.</div>
   <div class = "test"> This text belongs to the class test. </div>
   <div class = "demo"> This text belongs to the class demo. </div>
   <div class = "element"> This text belongs to the class element. </div>
</body>
</html>

输出

示例

在下面的示例中，我们不将类用作属性，而是将 id 与以 CSS 选择器结尾的属性一起使用。它展示了如何通过将通配符 CSS 选择器与其他特性结合使用来选择 HTML 组件。

在此示例中，我们更改所有 id 以“name”结尾的 HTML 元素的字体样式和颜色。

<html>
<head>
   <style>
      [id$="name"] {
         color: red;
         font-style: bold;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Example using the <i> ends with ($=) </i> wildcard CSS selector</h3>
   <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 选择器。用户可以使用包含 (*=) CSS 选择器查找属性值中间包含子字符串的组件。或者，用户可以使用以 (^=) CSS 选择器开头获取属性值开头包含子字符串的组件，并使用以 ($=) CSS 选择器结尾获取属性值结尾包含子字符串的组件。

在前面的示例中，我们还学习了如何将通配符 CSS 选择器与其他特性（包括 id）一起使用。

下一个主题最佳 CSS 网页安全字体及其搭配

← 上一个下一个 →

CSS Wildcard

概述

含义和应用

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

语法

CSS 中包含通配符选择器 (*=)。

语法

例如

以 CSS 通配符选择器开头 (^=)。

语法

示例

以 CSS 通配符选择器结尾 ($=)

语法

示例

示例

总结

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Wildcard

概述

含义和应用

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

语法

CSS 中包含通配符选择器 (*=)。

语法

例如

以 CSS 通配符选择器开头 (^=)。

语法

示例

以 CSS 通配符选择器结尾 ($=)

语法

示例

示例

总结

相关帖子

Conflict Resolution in CSS

CSS Invert

如何在 CSS 中设置背景图片的透明度

CSS Wrap

CSS Active

CSS Override Class

CSS Checkbox Size

CSS :Not(:last-of-type)

Conditional CSS Material UI

CSS Multiple Classes

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器