图解CSS3----7-属性选择器
一、效果：
二、代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
.head{
margin: 0 0 0 100px;
}
.container{
margin: 0 0 0 100px;
}
.container div{
border: 1px solid red;
width: 240px;
height: 200px;
text-align: center;
float: left;
}
.div1 p[class]{/*包含属性X*/
color: red;
}
.div2 p[class = 'p3']{ /*属性值等于X*/
color: green;
}
.div3 p[class|='p5']{/*属性值等于X或者以X开头*/
color: blue;
}
.div4 p[class~='p7']{/*属性值中有X*/
font-weight: bold;
}
.div5 p[class*="pp"]{/*属性值中包含X子符串*/
color: red;
}
.div6 p[class^="pp"]{ /*属性以X开头*/
color: red;
}.div7 p[class$="pp"]{/*属性以X结尾*/
color: red;
}
</style>
</head>
<body>
<div class="head">
<h1>属性选择器</h1>
<h2><a href="index.html">主页</a></h2>
</div>
<div class="container">
<div class="div1">
<h2>p[class]</h2> <!-- 包含有class的属性 -->
<p class = 'p1'>Sunlike阿理旺旺class ='p1'</p>
<p class = 'p2'>Sunlike阿理旺旺class ='p2'</p>
<p>Sunlike阿理旺旺</p>
</div>
<div class="div2">
<h2>p[class = 'p3']</h2><!-- class值为p3的属性 -->
<p class = 'p3'>Sunlike阿理旺旺class='p3'</p>
<p class = 'p4'>Sunlike阿理旺旺class='p4'</p>
<p>Sunlike阿理旺旺</p>
</div>
<div class="div3">
<h2>p[class|='p5']</h2><!-- class为p5或p5开头的属性 -->
<p class = 'p5'>Sunlike阿理旺旺class='p5'</p>
<p class = 'p5-1'>Sunlike阿理旺旺class='p5-1'</p>
<p>Sunlike阿理旺旺</p>
</div>
<div class="div4">
<h2>p[class~='p7']</h2><!-- 有多个属性有个一等于p7 -->
<p class = 'p p6'>Sunlike阿理旺旺class = 'p p6'</p>
<p class = 'p p7'>Sunlike阿理旺旺class = 'p p7'</p>
<p class = 'p7'>Sunlike阿理旺旺class = 'p7'</p>
<p>Sunlike阿理旺旺</p>
</div>
<div class="div5">
<h2>p[class*="pp"]</h2><!-- class字符串中包含pp，不管位置 -->
<p class = 'p8-pp-1'>Sunlike阿理旺旺class = 'p8-pp-1'</p>
<p class = 'pp-1-0'>Sunlike阿理旺旺class = 'pp-1-0'</p>
<p class = 'p9-1-pp'>Sunlike阿理旺旺class = 'p9-1-pp'</p>
<p>Sunlike阿理旺旺</p>
</div>
<div class="div6">
<h2>p[class^="pp"]</h2><!-- 属性class的值以pp开头的 -->
<p class = 'p10-pp-1'>Sunlike阿理旺旺class = 'p10-pp-1'</p>
<p class = 'pp-p10-0'>Sunlike阿理旺旺class = 'pp-p10-0'</p>
<p class = '0-pp-p10'>Sunlike阿理旺旺class = '0-pp-p10'</p>
<p>Sunlike阿理旺旺</p>
</div>
<div class="div7">
<h2>p[class$="pp"]</h2><!-- 属性class的值以pp结尾 -->
<p class = 'p10-pp-1'>Sunlike阿理旺旺class = 'p10-pp-1'</p>
<p class = 'pp-p10-0'>Sunlike阿理旺旺class = 'pp-p10-0'</p>
<p class = 'p10-0-pp'>Sunlike阿理旺旺class = '0-pp-p10'</p>
<p>Sunlike阿理旺旺</p>
</div>
</div>
</body>
</html>
3、总结：
1、E[attr] ：选择匹配具有attr的E属性；
2、E[attr= 'val']：选择匹配具有attr属性的E元素，并且attr的值为val；
3、E[attr|='val'] ：选择匹配E元素，并且定义了一个attr属性，该属性为val或者val-开头；
4、E[attr~='val'] ：选择匹配E元素，并且定义了一个attr属性，该属性有多个空格隔开的值，val就等于其中一个；
5、E[attr*='val'] ：选择匹配E元素，并定义了一个attr属性，该属性字符串中包含有val这个字符串；
6、E[attr^='val'] ：选择匹配E元素，并定义了一个attr属性，该属性值字符串开头为val；
6、E[attr$='val'] ：选择匹配E元素，并定义了一个attr属性，该属性值字符串结尾为val；
