搜索
首页web前端css教程CSS中的通配符选择器(*、^和$)用于类

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 id="Using-the-i-contains-i-wildcard-CSS-selector-in-CSS"> 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 id="Using-the-i-starts-with-i-wildcard-CSS-selector-in-CSS"> 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 id="Using-the-i-ends-with-i-wildcard-CSS-selector-in-CSS"> 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 id="Using-the-i-ends-with-i-wildcard-CSS-selector-in-CSS"> 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。如有侵权,请联系admin@php.cn删除
光标的下一个CSS样式光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒,但是我们可以将JavaScript提升到一个新的水平。使用JavaScript,我们可以在光标状态之间过渡,将动态文本放置在光标中,应用复杂的动画并应用过滤器。

世界碰撞:使用样式查询的钥匙帧碰撞检测世界碰撞:使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球,但CSS的灵活性和力量的增加,可以怀疑Lee&Aver Lee&Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器,并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗?微笑吗?Apr 23, 2025 am 09:57 AM

好吧,事实证明,SVG的内置动画功能从未按计划进行弃用。当然,CSS和JavaScript具有承载负载的能力,但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的,让#039;跳上文字包装:Safari Technology Preview In Pretty Landing!但是请注意,它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIICSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了,重点介绍了年鉴,最近的播客出现,新的CSS计数器指南以及增加了几位新作者,这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下,人们展示了@Apply的@Apply功能,其中包括Tailwind的单个property实用程序之一(会改变单个CSS声明)。当以这种方式展示时,@Apply听起来似乎很有希望。如此明显

感觉就像我没有释放:走向理智的旅程感觉就像我没有释放:走向理智的旅程Apr 23, 2025 am 09:19 AM

像白痴一样部署的部署归结为您部署的工具与降低复杂性与添加的复杂性之间的奖励之间的不匹配。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具