如何使用 CSS 通过数据属性选择元素?

cssweb developmentfront end technology更新于 2024/3/17 15:40:17

CSS(层叠样式表)是 Web 开发者增强网页视觉效果的重要工具。使用 CSS，我们可以自定义网站的布局、配色方案和排版。CSS 提供了多种基于属性定位和设置特定 HTML 元素样式的方法。使用数据属性是选择元素最实用、最有效的方法之一。

什么是数据属性?

数据属性是 HTML 属性，它提供有关元素的附加信息，这些信息对用户不可见，但可以通过脚本或 CSS 访问。这些属性以"data-"开头，后跟描述性名称。数据属性可用于存储用户不可见但可以通过脚本或 CSS 访问的信息。

例如，假设我们有一个产品列表，并且我们想要对具有不同评级的产品应用不同的样式。我们可以使用数据属性来存储评分值，并通过 CSS 来定位它。

如何在 HTML 中使用数据属性?

要在 HTML 中使用数据属性，我们需要在属性名称中添加"data-"前缀。以下是示例 -

<ul>
   <li data-rating="6">Product One</li>
   <li data-rating="9">Product Two</li>
   <li data-rating="7">Product Three</li>
   <li data-rating="6">Product Four</li>
</ul>

在上面的例子中，我们为每个列表项添加了一个 data-rating 属性，用于存储每个产品的评分值。这些数据可以通过 CSS 访问和操作。

如何使用 CSS 按数据属性选择元素?

要使用 CSS 按数据属性选择元素，我们使用属性选择器。属性选择器允许我们根据元素的属性值来定位元素。

语法

[attribute="value"] {
   /*css code */
}

在上述语法中，"attribute" 指的是我们想要定位的数据属性，"value" 指的是数据属性的值。例如，如果我们想为评分为 6 的产品应用不同的背景颜色，我们将使用以下 CSS 代码 -

li[data-rating="6"] {
    background-color: red;
}

在上述代码中，我们使用属性选择器来定位 data-rating 属性值为 6 的列表项，并为其应用红色背景颜色。

示例 1

这是一个使用 CSS 通过数据属性选择元素的示例。

<DOCTYPE html>
<html>
<head>
   <style>
      h2{
         text-align: center;
      }
      li {
         font-size: 20px;
      }
      li[data-rating="6"] {
         background-color: red;
      }
   </style>
</head>
   <body>
      <h2>Selecting elements by data attribute using CSS </h2>
      <ul>
         <li data-rating="6">Product One</li>
         <li data-rating="9">Product Two</li>
         <li data-rating="7">Product Three</li>
         <li data-rating="6">Product Four</li>
      </ul>
   </body>
</html>

示例 2

这是另一个使用 CSS 通过数据属性选择元素的示例。在本例中，我们使用 data-my-data 属性来存储标签的相关信息。第一条 CSS 规则选择所有具有 data-my-data 属性的元素，并对其应用一些基本样式。第二条规则仅选择具有 data-my-data 属性的元素，并对其应用悬停样式。第三条规则仅选择具有 data-my-data 属性的元素，并应用 CSS 样式。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center;}
      [data-my-data] {
         border: 1px solid black;
         padding: 10px;
         cursor: pointer;
      }
      [data-my-data]:hover {
         background-color: red;
         color: white;
      }
      [data-my-data="d-tab"] {
         background-color: lightblue;
         color: black;
         width:250px;
         margin:auto;
      }
   </style>
</head>
   <body>
      <h3>Hover over the below DIVs to see the changes</h3>
      <div data-my-data="d-tab">First Tab Data</div>
      <div data-my-data="d-tab">Second Tab Data</div>
      <div data-my-data="d-tab">Third Tab Data</div>
   </body>
</html>