第一章：第一课 CSS3选择器
第一章：CSS3选择器
第一课：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>
总结
这四种选择器都比较简单方便，很容易理解，如果你之前看过《jQuery教程》中的选择器的话，那就更容易理解了，jQuery中的选择器有很多，其中有不少是CSS3选择器。
本帖来源于W3Cfuns原创，转帖便于学习及推广，请尊重他人的劳动成果！
