关注我千锋IT教育了解更多编程技术知识，带你一路“狂飙”到底！上岸大厂不是梦！
CSS3的属性选择器可以根据标签的属性和属性值来选择需要的元素,属性选择器总共有下面这些
为了更好的让大家理解,下面分别用代码演示一下
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3属性选择器的使用</title>
<style type="text/css">
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow: hidden;
margin: 20px auto;
}
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
/* 属性选择器写法1 某某[属性] 选择到a标签中有title属性的变*/
a[title]{
background:red;
}
/* 选择到a标签中,有title属性且也有id属性的变化 */
a[title][id]{
background:red;
}
/* 属性选择器写法2 某某[属性="属性值"] 选择到a标签中有该属性且也有该属性值的变 */
/* 选择到a标签中有title属性,且属性值是w3cplus的变 注意点里面的属性值必须跟下面的一模一样,多个空格都不行*/
/* a[title="w3cplus"]{
background:red;
} */
/* 选择到a标签中有lang属性,且属性值是zh的且有title属性,且属性值得是test的变化 */
/* a[lang="zh"][title="test"]{
background:red;
} */
/* 属性选择器写法3 某某[属性^="属性值"] 选择到a标签中有该属性且也有该属性值开头的变 */
/* a[href^="si"]{
background:red;
} */
/* a[title^="open"]{
background:red;
} */
/* 属性选择器写法4 某某[属性$="属性值"] 选择到a标签中有该属性且也有该属性值结尾的变 */
/* a[href$="png"]{
background:red;
} */
/* 属性选择器写法5 某某[属性*="属性值"] 选择到a标签中有该属性且也有该属性值的变,这个值可以在任意位置 */
/* a[href*="/"]{
background:red;
} */
/* 属性选择器写法6 某某[属性~="属性值"] 选择到a标签中有该属性且也有该属性值是完整的词的变 ,浏览器判断是否是一个词,看前后是否有空格,如果有就是一个词 */
/* a[href~="file"]{
background:red;
} */
/* 属性选择器写法7 某某[属性|="属性值"] 选择到a标签中有1个该属性值会被选择到,或者有多个属性值但是得是某某-开头的 */
/* 可以选择到a标签中,有title属性,且属性值只有1个是this的变或者是有多个属性值但是得是this-开头的才可以 */
/* a[title|="this"]{
background:red;
} */
</style>
</head>
<body>
<div class="demo">
<a href="http://www.baidu.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="sites/ file /test.html" class="links item" title="this- is a link" lang="zh-cn">3</a>
<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="sites/file/image.jpg" class="links item" title="this">5</a>
<a href="mailto:baidu@hotmail" class="links item" title="website link" lang="zh">6</a>
<a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
<a href="/abc.pdf" class="links item" title="close the website" lang="en-zh">8</a>
<a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</div>
</body>
</html>
课程传送门：Web前端基础与提升（HTML+CSS全套）
本教程专门针对编程小白而制作，是学习HTML+CSS很好的入门教程。学完后能写出你看到的静态页面。
