属性选择器
属性选择器就是把id与class结合起来使用
基础html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<p class="rainbowsix">
<a href="http://www.baidu.com" id="ash">1</a>
<a href="http://www.bilibili.com" class="zofia ela">2</a>
<a href="1.jpg" class="links thermite emp">3</a>
<a href="2345.jpg">4</a>
<a href="r6.png">5</a>
<a href="flash.png">6</a>
<a href="" id="slenge">7</a>
<a href="" class="rook doc">8</a>
</p>
</body>
</html>
基础css代码：
/*选中存在id标签的元素*/
.rainbowsix a{
float: left;
/*显示为块元素*/
display: block;
/*块的宽和高*/
height: 50px;
width: 50px;
/*去除下划线*/
text-decoration: none;
/*块背景颜色*/
background-color: deepskyblue;
/*圆角边框*/
border-radius: 10px;
/*块的外边距*/
margin-left: 10px;
/*行高 控制字体上下居中*/
line-height: 50px;
/* 控制字体左右居中*/
text-align: center;
}
测试访问
选择带有id属性的标签
css代码：
a[id]{
background-color: green;
}
测试访问
选择含有某种元素的标签
css代码
a[class*=zofia]{
background-color: green;
}
测试访问
选择某种元素为开头的标签
css代码
a[class^=rook]{
background-color: green;
}
测试访问
选择以某个元素为结尾的标签
css代码
a[href$=png]{
background-color: green;
}
测试访问
