Css獲取data屬性

data屬性是在html5中引入的屬性，可以自定義屬性值，用于存儲數(shù)據(jù)。在Css中，可以利用data屬性實現(xiàn)一些動態(tài)效果，比如懸停顯示信息、交互效果等。
1. 獲取data屬性值
要獲取data屬性值，我們可以使用css偽類[data-attr]來定位元素，然后使用attr()函數(shù)獲取其屬性值。如下所示：
HTML代碼：
<div id="demo" data-name="hello">Hello World!</div>
Css代碼：
#demo:hover::before {
content: attr(data-name);
}
結(jié)果：
Hello World!
將鼠標(biāo)移至上方顯示效果
2. 獲取子元素data屬性值
當(dāng)我們需要獲取子元素的data屬性值時，可以使用偽元素::after和::before來實現(xiàn)，如下所示：
HTML代碼：
<div id="demo">
<span data-info="This is a demo">Demo</span>
</div>
Css代碼：
#demo span:hover::after{
content: attr(data-info);
}
結(jié)果：
Demo
將鼠標(biāo)移至上方顯示效果
3. 使用變量獲取data屬性值
為了使代碼更加簡潔和易讀，我們可以使用變量來獲取data屬性值。首先我們需要定義一個:root偽類，然后通過var()函數(shù)來調(diào)用變量，如下所示：
Css代碼：
:root {
--color:#f00;
}
#demo:hover::before{
content:var(--color);
}
結(jié)果：
Hello World!
將鼠標(biāo)移至上方顯示效果
以上就是關(guān)于Css獲取data屬性的文章，希望對大家有所幫助！