資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
