CSS3每日一练之选择器-属性选择器

CSS3中，增加了如下三个属性选择器，使属性选择器有了通配符的概念，十分方便！
【注】下面所描述的attr和val分别表示属性和值
[attr*=val]属性选择器
概述：表示筛选出属性attr中包含属性值val所制定的字符的话，那么将选择此元素。
案例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-属性选择器|前端开发网(W3Cfuns.com)</title>
<style type="text/css">
*{margin:0; padding:0;}
div{font-family:"Microsoft yahei";}
[id*=abc]{margin-right:10px; width:200px; height:200px; text-align:center; font-size:24px; color:#fff; background:#900; float:left;}/*此选择器表示选择id包含字符串abc的元素*/
</style>
</head>
<body>
<div id="ab">我的id是ab</div>
<div id="abc">我的id是abc</div>
<div id="w3cabc">我的id是w3cabc</div>
<div id="w3cabc123">我的id是w3cabc123</div>
<div id="ac">我的id是ac</div>
</body>
</html>

[attr^=val]属性选择器
概述：表示筛选出属性attr中开头字符串为属性值val所制定的字符的话，那么将选择此元素。
案例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-属性选择器|前端开发网(W3Cfuns.com)</title>
<style type="text/css">
*{margin:0; padding:0;}
div{font-family:"Microsoft yahei";}
[id^=a]{margin-right:10px; width:200px; height:200px; text-align:center; font-size:24px; color:#fff; background:#090; float:left;}/*此选择器表示选择id开头字符串为a的元素*/
</style>
</head>
<body>
<div id="ab">我的id是ab</div>
<div id="abc">我的id是abc</div>
<div id="w3cabc">我的id是w3cabc</div>
<div id="w3cabc123">我的id是w3cabc123</div>
<div id="ac">我的id是ac</div>
</body>
</html>

[attr$=val]属性选择器
概述：表示筛选出属性attr中结束字符串为属性值val所制定的字符的话，那么将选择此元素。
案例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-属性选择器|前端开发网(W3Cfuns.com)</title>
<style type="text/css">
*{margin:0; padding:0;}
div{font-family:"Microsoft yahei";}
[id$=c]{margin-right:10px; width:200px; height:200px; text-align:center; font-size:24px; color:#fff; background:#009; float:left;}/*此选择器表示选择id结束字符串为c的元素*/
</style>
</head>
<body>
<div id="ab">我的id是ab</div>
<div id="abc">我的id是abc</div>
<div id="w3cabc">我的id是w3cabc</div>
<div id="w3cabc123">我的id是w3cabc123</div>
<div id="ac">我的id是ac</div>
</body>
</html>

[attr=val]属性选择器
注解：此选择器非CSS3新加入，在这里提一下，不但让大家复习一下之前的知识还将属性选择器分为一类在此介绍，比较便于理解。
概述：表示筛选出属性attr中字符串等于属性值val所制定的字符的话，那么将选择此元素。
案例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-属性选择器|前端开发网(W3Cfuns.com)</title>
<style type="text/css">
*{margin:0; padding:0;}
div{font-family:"Microsoft yahei";}
[id=abc]{margin-right:10px; width:200px; height:200px; text-align:center; font-size:24px; color:#fff; background:#909; float:left;}/*此选择器表示选择id字符串为abc的元素*/
</style>
</head>
<body>
<div id="ab">我的id是ab</div>
<div id="abc">我的id是abc</div>
<div id="w3cabc">我的id是w3cabc</div>
<div id="w3cabc123">我的id是w3cabc123</div>
<div id="ac">我的id是ac</div>
</body>
</html>