CSS Selectors 属性选择符
白星渊
在< style > 标签中
div[user] {} : 选择div标签中具有user属性的; div[user=bb] {} : 选择div标签中,属性user=bb的;
div[user^=b] {} : 选择div标签中,以属性值为b开头的; div[user$=b] {} : 选择div标签中,以属性值为b结尾的;
[user*=b] {} : 所有标签,只要有user属性,属性中有b字符串
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>属性选择符</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<style>
/*选择div标签中具有user属性的*/
div[user] {
color: #068606;
}
/*选择div标签中,属性user=bb的*/
div[user=bb] {
color: aqua;
}
/*选择div标签中,以属性值为b开头的*/
div[user^=b] {
color: #10f574;
}
/*选择div标签中,以属性值为b结尾的*/
div[user$=b] {
background-color: red;
}
/*所有标签,只要有user属性,属性值中有b字符串*/
[user*=b] {
color: blue;
}
</style>
</head>
<body>
<!-- user就是属性 "aa"是属性值-->
<div user="aa">Lorem ipsum dolor.</div>
<div user="bd">Eos nobis, quae.</div>
<div user="bb">Fuga, laudantium, molestias.</div>
<hr>
<p user="b">Lorem ipsum dolor.</p>
<hr>
<style>
div[class~="a"] {
border: 2px red;
}
</style>
<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>
</body>
</html>
类似资料：