CSS——属性选择器
属性选择器可以根据元素的属性及属性值来选择元素，相当于把class选择器和id选择器结合，功能更强大。
属性选择器的测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left; /*位置靠左边*/
display；block; /*变成块级元素*/
height:50px; /*高和宽*/
width: 50px;
border-radius:24px; /*变成圆形*/
background:blue;
text-align:center; /*让数字对齐*/
color:white; /*数字颜色*/
text-decoration:none; /*删除下划线*/
margin-right:5px; /*每个元素的间距*/
font:bold 20px/50px Arial; /*bold：粗体*/
}
/*格式
属性名[属性名=属性值（或者正则表达式）]*/
/*简单属性选择*/
/*选中存在id属性的元素*/
/*
a[id]{
background:yellow;
}
*/
/*根据具体属性值选择*/
/*选中id=first的元素*/
/*
a[id=first]{
background:green;
}
*/
/**根据部分属性值选择/
/*选中class中有links的元素 *包含所有*/
/*
a[class*=links]{
background:red;
}
*/
/*选择href属性中以http开头的元素 ^以这个开头*/
/*
a[href^=http]{
background:yellow;
}
*/
/*选择href属性中以pdf结尾的元素 $以这个结尾*/
/*
a[href$=pdf]{
background:red;
}
*/
</style>
</head>
<body>
<p class="demo">
<a href="http://baidu.com" class="links item first" id="first">1</a>
<a href="https://mp.csdn.net/console/article" class="links item active" target="_blank">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="image/123.png" class="links item">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc" class="links item" id="peng">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="/abc.doc" class="links item">9</a>
<a href="/abcd.doc" class="links item">10</a>
</p>
</body>
</html>
测试用到的正则表达式符号解释
