属性选择器(常用)
*= 包含等于
^= 以这个开头的
$= 以这个结尾
格式: 例如:
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[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://i-blog.csdnimg.cn/blog_migrate/419cd307a25c2ddc378026a23cb2bb48.png#pic_center)