demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 50px;
border: 1px solid #000;
margin: 20px auto;
text-align: center;
}
div[class] { /* 带有class属性的div */
background-color: red;
}
div[class="box1"] { /* 带有class属性的div,并且class值为"box1" */
background-color: pink;
}
div[class^="aa"] { /* 带有class属性的div,并且class以"aa"开头 */
background-color: blue;
}
div[class$="aa"] { /* 带有class属性的div,并且class以"aa"结尾 */
background-color: #9da;
}
div[class*="bb"] { /* 带有class属性的div,并且class包含"bb" */
background-color: #9a1;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="aabox2">2</div>
<div class="aabox3">3</div>
<div class="box4aa">4</div>
<div class="bbox5">5</div>
<div class="bobbx6">6</div>
<div class="box7bb">7</div>
<div>8</div>
</body>
</html>