屬性選擇器（常用）
? *= 包含等于
? ^= 以這個開頭的
? $= 以這個結尾
格式： 例如：
a[href$=gif]{
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
</head>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
background: chartreuse;
border-radius: 25px;
text-align: center;
text-decoration: none;
margin-right: 10px;
font:bold 25px/50px Arial;
}
/*屬性選擇器
= 直接等于
*= 包含等于
^= 以這個開頭的
$= 以這個結尾
*/
/*a[id=bbb]{*/
/* background: #ff00a1;*/
/*}*/
/*a[class*=item]{*/
/* background: red;*/
/*}*/
/*a[href^=img]{*/
/* background: yellow;*/
/*}*/
a[href$=gif]{
background: black;
}
</style>
<body>
<p class="demo">
<a href="ww.baidu.com" class="first item aaa" id="bbb">1</a>
<a href="img/123.html" class="first item" id="cc">2</a>
<a href="img/123.txt" class="first item1" >3</a>
<a href="img/123.xml"class="first item" >4</a>
<a href="abc" class="first item">5</a>
<a href="bda.txt" class="first item1">6</a>
<a href="aaa.zip" class="first item">7</a>
<a href=dasfja.jpg class="first item">8</a>
<a href="werwerw.doc" class="first item">9</a>
<a href="werwe.gif" class="last item1">10</a>
</p>
</body>
</html>
- 效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/251793.html
標籤：其他