极客笔记CSS 有没有选择器来选择包含特定文本的元素
在CSS中，选择器用于选择要样式化的HTML元素。CSS中有各种可用的选择器，如class选择器、id选择器、name选择器等。
有时，开发人员需要根据自定义属性值选择HTML元素，而不是根据类名或id选择它。我们可以使用属性值CSS选择器来根据特定的属性值选择HTML元素。我们还可以在HTML中添加自定义属性，而不仅限于预定义的属性。
语法
用户可以按照以下语法使用属性值CSS选择器来选择包含特定文本的元素。
[attribute name="attribute value"] {
/* CSS code */
}
在上述语法中，属性名称可以是HTML元素包含的属性名称，而您想根据属性值选择元素。属性值是特定属性的值。
示例1
以下示例中，我们创建了一个名为“social”的div元素。在div元素中，我们添加了包含“app_name”属性及其值的子div元素。在CSS中，我们使用“app_name”作为属性名称，并使用不同的值来选择不同的div元素。
在输出中，用户可以观察到已对包含“Facebook”和“Instagram”属性值的div元素进行了样式设置。
<html>
<head>
<style>
[app_name="facebook"] {
background-color: #3b5998;
color: white;
}
[app_name="instagram"] {
background-color: #e4405f;
color: white;
}
</style>
</head>
<body>
<h3> Using the <i> [attribute=value] </i> CSS selector to target an element based on its attribute value </h3>
<div class = "social">
<div app_name = "facebook"> facebook </div>
<div app_name = "twitter"> twitter </div>
<div app_name = "instagram"> instagram </div>
<div app_name = "youtube"> youtube </div>
</div>
</body>
</html>
示例2
在下面的示例中，我们使用了属性值选择器，但对于部分选择器，我们使用了“~”符号。它选择HTML元素，即使属性中的值包含一个特定的词，而不是匹配第一个示例中的整个词。
我们在属性值CSS选择器中使用了“app”一词。因此，它会选择所有类型属性包含“app”一词的HTML元素。输出结果显示，它已经对前三个div元素进行了样式设置，因为它们包含了“app”一词。
<html>
<head>
<style>
[type~="app"] {
color: red;
width: 200px;
text-align: center;
border: 1px solid black;
margin: 10px;
padding: 10px;
border: 3px solid green;
}
</style>
</head>
<body>
<h3> Using the <i> [attribute~=value] </i> CSS selector to target an element based on its attribute value </h3>
<div class = "appllication">
<div type = "web app"> Web application </div>
<div type = "mobile app"> Mobile application </div>
<div type = "desktop app"> Desktop application </div>
<div type = "device"> Anroid device </div>
</div>
</body>
</html>
示例3
在下面的示例中，我们使用了属性-值CSS选择器中的‘^’符号。它允许选择所有属性值以特定单词开头的元素。
这里，我们创建了具有不同类名的div元素。在CSS中，我们使用属性-值选择器来选择所有类名以‘a’字符开头的HTML元素。
<html>
<head>
<style>
[class ^="a"] {
background-color: aqua;
height: auto;
font-size: 2rem;
padding: 10px;
width: 300px;
margin: 10px;
}
</style>
</head>
<body>
<h3> Using the <i> [attribute*=value] </i> CSS selector to target an element based on its attribute value </h3>
<div class = "start">
<div class = "abc"> ABC </div>
<div class = "ade"> ADE </div>
<div class = "bcd"> BCD </div>
<div class = "cde"> CDE </div>
</div>
</body>
</html>
示例4
在下面的示例中，我们创建了一个包含零食名称、过期日期和价格的表格。此外，我们还添加了一个等于过期的状态，用于表示已过期的零食。我们使用属性值CSS选择器来选择“过期”零食，并对其进行样式化。
<html>
<head>
<style>
td[status*=expired] {
color: red;
background-color: green;
}
</style>
</head>
<body>
<h3> Using the <i> [attribute*=value] </i> CSS selector to target an element based on its attribute value </h3>
<table>
<tr>
<th> Snack </th>
<th> Expiry </th>
<th> Price </th>
</tr>
<tr>
<td> Chips </td>
<td> 01/01/2024 </td>
<td> 20 INR </td>
</tr>
<tr>
<td> Chocolate </td>
<td> 01/09/2023 </td>
<td> 30 INR </td>
</tr>
<tr>
<td> Candy </td>
<td status = "expired"> 01/01/2022 </td>
<td> 25 INR </td>
</tr>
</table>
</body>
</html>
用户学会了根据特定的文本选择一个HTML元素。我们可以给HTML元素添加自定义属性，然后可以使用属性值CSS选择器根据属性值选择元素。