数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 选择带有 data 属性的元素？
CSS（层叠样式表）是 Web 开发人员增强网页视觉效果的重要工具。使用 CSS，我们可以自定义网站的布局、配色方案和排版。CSS 提供多种方法来根据 HTML 元素的属性来定位和设置特定 HTML 元素的样式。其中一种最有用和最强大的选择元素的方法是使用 data 属性。
什么是 data 属性？
Data 属性是 HTML 属性，提供关于元素的附加信息，这些信息对用户不可见，但脚本或 CSS 可以访问。这些属性以“data-”开头，后跟描述性名称。Data 属性可用于存储对用户不可见但脚本或 CSS 可访问的信息。
例如，假设我们有一份产品列表，我们想对具有不同评级的产品应用不同的样式。我们可以使用 data 属性来存储评级值并使用 CSS 定位它。
如何在 HTML 中使用 data 属性？
要在 HTML 中使用 data 属性，我们需要在属性名称前添加“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” 指的是我们要定位的 data 属性，“value” 指的是 data 属性的值。例如，如果我们想为评级为 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 属性的元素的示例。在这个例子中，我们使用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>
结论
通过在 HTML 中存储附加数据并使用 CSS 定位它，我们可以创建交互式和动态的网页，以满足特定需求。在 HTML 中使用 data 属性并使用 CSS 选择带有 data 属性的元素可以成为自定义网页外观的强大方法。
3K+ 次浏览
