<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >CSS3选择器Hacks </title>
< style type ="text/css" >
p
{
color:blue;
}
p[id="para"]
{
color:red;/*现代浏览器*/
}
</style>
</head>
< body >
< p id ="para" >段落文本 < p >
< p >段落文本 < p >
</body>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >CSS3选择器Hacks </title>
< style type ="text/css" >
p
{
color:blue;
}
p[id="para"]
{
color:red;/*现代浏览器*/
}
</style>
</head>
< body >
< p id ="para" >段落文本 < p >
< p >段落文本 < p >
</body>
</html>
在IE6下，这些段落都显示蓝色
在FF3下，我们发现 #para的段落颜色为红色。
这样可以为支持这种用法的现代浏览器定制一些属性。
注:
这种选择器用法还有
input[id]具有id这个属性的input
input[id^="test"],input[id$="test"],input[id~="test]
这些用法很像正则表达式。
因为主流浏览器(ie6-)不支持这种用法，我平时没怎么用过。
倒是JQuery里有这种用法。
当然使用其他的CSS3选择器(貌似这些CSS2规范里好像有，只是IE6没实现,具体不详，很少看IE的相关，不知道IE7有没有支持)也行了:
<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >子选择符hacks </title>
< style type ="text/css" >
.para
{
color:blue;/*ie6*/
}
body>.para
{
color:red;/*现代浏览器*/
}
</style>
</head>
< body >
< p class ="para" >段落文本 < p >
< p >段落文本 < p >
< div >
< p class ="para" >div里面的段落 </p>
</div>
</body>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >子选择符hacks </title>
< style type ="text/css" >
.para
{
color:blue;/*ie6*/
}
body>.para
{
color:red;/*现代浏览器*/
}
</style>
</head>
< body >
< p class ="para" >段落文本 < p >
< p >段落文本 < p >
< div >
< p class ="para" >div里面的段落 </p>
</div>
</body>
</html>
子选择符是我认为非常重要的一个，遗憾的是IE6没有支持
body>.para选择所有的body的孩子中具有类para的元素。
目前使用的body .para只是选择后代这样很难满足一些要求，尤其对于嵌套标签时，平时遇到不少，指向控制孩子级别的，但是只好用
body .para{设置}在通过 body * .para{还原}之类的，或者给个类啥的。比较麻烦。
CSS3还有+这样的 p+span表示后面相邻的。
本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/102829，如需转载请自行联系原作者
