数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中有没有选择包含特定文本的元素的选择器？
要选择在 CSS 中包含特定文本的元素，我们可以使用 CSS 属性选择器。我们可以使用预定义属性，也可以在 HTML 文档中添加自定义属性。
在本文中，我们有一些带有某些属性的 div 元素，我们的任务是在 CSS 中选择包含特定文本的元素。
选择包含特定文本的元素的方法
以下是本文将讨论的在 CSS 中选择包含特定文本的元素的方法列表，其中包含分步说明和完整的示例代码。
使用属性值选择器
为了在 CSS 中选择包含特定文本的元素，我们使用了 CSS **属性值** 选择器。
- 我们使用了 **"[app_name="app1"]"** 来选择具有属性 **app_name** 且属性值为 **app1** 的 div。类似地，我们选择了属性值为 app2 的 div。
- 然后，我们使用了 CSS 颜色 和 字体大小 属性来设计所选元素。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 CSS **属性值** 选择器选择包含特定文本的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[app_name="app1"] {
color: #04af2f;
font-size: 1.3rem;
}
[app_name="app2"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<p>
In this example we have used <strong>attribute
</strong> selector to change the text color
and increase the font size of div element.
</p>
<div app_name="app1">This is a div with app1.</div>
<div app_name="app2">This is a div with app2.</div>
<div app_name="app3">This is a div with app3.</div>
<div app_name="app4">This is a div with app4.</div>
</body>
</html>
使用属性包含单词 (~=) 选择器
在这种选择包含特定文本的元素的方法中，我们使用了 CSS **包含单词 (~=) 选择器**。它选择具有特定属性且值包含指定单词的元素。
- 我们使用了 **"[type~="app"]"** 来选择所有具有属性名称 **type** 且包含单词 **app** 的 div 元素。
- 然后，我们使用了 CSS 颜色和字体大小属性来设计所选元素。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 CSS **包含单词 (~=) 选择器** 选择包含特定文本的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type~="app"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<p>
In this example we have used <strong>[type~="app"]
</strong> selector to change the text color and
increase the font size of div element.
</p>
<div type="web app">This div is of type app.</div>
<div type="mobile product">This div is of type product.</div>
<div type="desktop tutoril">This div is of type tutorial.</div>
<div type="device app">This div is of type app.</div>
</body>
</html>
使用属性包含子字符串 (*=) 选择器
在这种选择包含特定文本的元素的方法中，我们使用了 CSS **包含子字符串 (*=) 选择器**。它选择具有特定属性且值包含特定子字符串的元素。
- 我们使用了 **"[class*="test"]"** 来选择所有类名包含子字符串 **test** 的 div 元素。
- 然后，我们使用了 CSS 颜色和字体大小属性来设计所选元素。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 CSS **包含子字符串 (*=) 选择器** 选择包含特定文本的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[class*="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<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 having test
in it's class name.
</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 **以开头 (^=) 选择器**。它选择具有特定属性且值以特定字符串开头的元素。
- 我们使用了 **"[type^="test"]"** 来选择所有属性名称 **type** 以单词 **test** 开头的 div 元素。
- 然后，我们使用了 CSS 颜色、边框 和 最大宽度 属性来设计所选元素。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 CSS **以开头 (^=) 选择器** 选择包含特定文本的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type^="test"] {
color: #04af2f;
border: 2px solid black;
max-width: fit-content;
}
</style>
</head>
<body>
<h2>
Selecting Elements Containing Certain Text in CSS
</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 type="test1">
This is a div with the class name test1.
</div>
<div type="sampletest">
This is a div with the class name sampletest.
</div>
<div type="testdemo">
This is a div with the class name test demo.
</div>
<div type="element">
This is a div with the class name element.
</div>
</body>
</html>
使用属性以结尾 ($=) 选择器
在这种选择包含特定文本的元素的方法中，我们使用了 CSS **以结尾 ($=) 选择器**。它选择具有特定属性且值以特定字符串结尾的元素。
- 我们使用了 **"[type^="test"]"** 来选择所有属性名称 **type** 以单词 test 结尾的 div 元素。
- 然后，我们使用了 CSS 颜色和字体大小属性来设计所选元素。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 CSS **以结尾 ($=) 选择器** 选择包含特定文本的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type$="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Selecting Elements Containing Certain Text in CSS
</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 type="test1">
This is a div with the id name test1.
</div>
<div type="sampletest">
This is a div with the id name sampletest.
</div>
<div type="testdemo">
This is a div with the id name test demo.
</div>
<div type="elementtest">
This is a div with the id name element test.
</div>
</body>
</html>
结论
在本文中，我们了解了五种不同的方法来选择 CSS 中包含特定文本的元素，它们分别是：使用 **属性值** 选择器、使用 **包含单词 (~=) 选择器**、使用 **包含子字符串 (*=) 选择器**、使用 **以开头 (^=) 选择器** 以及使用 **以结尾 ($=) 选择器**。
更新于：2024年10月1日
6K+ 阅读量
广告