属性选择器 *= ^= $=
2016-09-27 本文已影响19人
Simon_s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body,{
margin: 0;
padding:0;
}
/* *= 表示 属性里需要 包含 等号后面的值才能匹配 */
p[class *= "t"]{
height: 30px;
background-color: red;
}
/* ^= 表示 属性里需要以等号后面的值 开头 才能匹配 */
p[class ^="m"]{
background-color: forestgreen;
}
/* $= 表示 属性里需要以等号后面的值 结尾 才能匹配 */
p[class $="9"]{
background-color: aqua;
}
</style>
</head>
<body>
<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>
<p class="mtem6"></p>
<p class="item7"></p>
<p class="item8"></p>
<p class="item9"></p>
<p class="item10"></p>
</body>
</html>
