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

CSS（层叠样式表）是Web开发人员增强网页外观的基本工具。通过CSS，我们可以自定义网站的布局、颜色方案和排版。CSS提供了多种根据属性选择和样式特定HTML元素的方法。其中一种最有用和强大的方法是使用数据属性选择元素。

什么是数据属性

数据属性是HTML属性，提供关于元素的附加信息，这些信息对用户不可见，但可以被脚本或CSS访问。这些属性以”数据-“开头，后面是一个描述性名称。数据属性可以用来存储对用户不可见但可以被脚本或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按data属性选择元素

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

语法

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

在上面的语法中，” attribute “指的是我们要定位的数据属性，而” value “指的是数据属性的值。例如，如果我们想要为评分为6的产品应用不同的背景颜色。为了做到这一点，我们将使用以下CSS代码 –

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

在上面的代码中，我们使用属性选择器来选择具有data-rating属性值为6的列表项，并将它们的背景颜色设为红色。

示例1

这里是一个使用CSS选择元素的data属性的示例。

<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>