<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.demo a{
float: left; /*向左浮动*/
display: block; /*display 属性规定元素应该生成的框的类型*/
height: 50px;
width: 50px;
border-radius: 25px; /*添加圆角边框*/
background: #7ce5f3; /*背景颜色*/
text-align: center; /*text-align 属性规定元素中的文本的水平对齐方式,center:把文本排列到中间。*/
color: #927b46;
text-decoration: none; /*去掉下划线*/
line-height: 50px; /*line-height 属性设置行间的距离(行高)(不允许使用负数)*/
}
/* 标签名[属性名]{} 标签名[属性名=属性值(正则)]{} a[]{}*/
a[id]{ /*存在id属性的元素*/
background: aquamarine;
}
a[id=last]{ /*id=first的元素*/
background: khaki;
}
/* a[class*="links"]{ /*class中有links的元素 (id不需要引号是因为id唯一)*/
/* background: #98be3e ; */
/* } */
/*
=是绝对等于
*是通配符 *=包含这个元素
^= 以...开头
$= 以...结尾
*/
a[href^=http]{ /*选中href中以http开头的元素*/
background: black;
}
a[href$=pdf]{ /*选中href中以pdf结尾的元素*/
background: brown;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.jpg" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.html" class="links item">5</a>
<a href="abc">6</a>
<a href="/a.pdf">7</a>
<a href="http://www.baidu.com">8</a>
<a href="www.gugu.net">9</a>
<a href="abcd.doc" class="links item last" id="last">10</a>
</p>
</body>
</html>