属性选择器）"/>
CSS05（属性选择器）
属性选择器
属性选择器就是把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="" id="ash">1</a><a href="" 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;
}
测试访问
更多推荐
CSS05（属性选择器）
发布评论