css3学习 之 css选择器(css3 属性选择器)
http://www.cnblogs.com/blueSkys/archive/2011/12/26/2301733.html
这是上一篇css选择器介绍里面内容比较详细。。大家可以看看 下面我将结合《HTML 5与css 3权威指南》这本书 对css选择器再进行记录下
里面有些个人见解如果看客觉得有问题。可以提出来。。谢谢
先说明下本机浏览器吧：opera 10 firefox 4.0 chrome 由于是公司机器xp的。。所以ie版本为 ie8 另外有一个ietest
在css3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式也会变得简洁明了。
1：css3 属性选择器
(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1： [att*=val];解释：如果元素用att表示的属性之属性值中包含用val指定的字符的话，则该元素使用这个样式.
example:
<head>
<style>
[id*=section]{
background-color:red;
}
</style>
</head>
<body>
<p id="sections9999"></p>
</body>
</html>
运行效果：除了ie其他均能正常显示。。
2:[att^=val];解释：如果元素用att表示的属性之属性值的开头为用val指定的字符的话，则该元素使用这个样式。(其实你可以这样理解在正则里面^匹配开头嘛所以喽。。)
example:
略；
运行效果：除了ie其他均能正常显示。。
3:[att$=val];解释：如果元素用att表示的属性之属性值的结尾为用val指定的字符的话，则该元素使用这个样式。(在正则里面$匹配结尾。。)
example:
略；
运行效果：除了ie其他均能正常显示。。
下面再看一个例子:
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
content:"web网页";
color:red;
}
a[href$=jpg]:after{
content:"JPG图像素材";
color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="http://home.cnblogs.com/blog/">博客</a></li>
<li><a href="http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html">css选择器</a></li>
<li><a href="ss.jpg">图像素材</a></li>
</ul>
</body>
</html>
运行效果：除了ie其他均能正常显示。。
