CSS 中是否有包含特定文本的元素选择器?

cssweb developmentfront end technology更新于 2024/5/21 1:48:17

在 CSS 中，选择器用于选择要设置样式的 HTML 元素。CSS 中有各种 CSS 选择器，例如类选择器、ID 选择器、名称选择器等。

有时，开发者需要根据自定义属性值来选择 HTML 元素，而不是根据类名或 ID 来选择。我们可以使用属性值 CSS 选择器，根据特定属性值来选择 HTML 元素。我们还可以添加自定义属性，而不仅仅是 HTML 中的预定义属性。

语法

用户可以按照以下语法使用属性值 CSS 选择器来选择包含特定文本的元素。

[attribute name="attribute value"] {
/* CSS 代码 */
}

在上述语法中，属性名称可以是 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"这个词。因此，它将选择所有 type 属性包含"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 中选择了"已过期"零食，并使用属性值 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 选择器根据属性值选择元素。