使用CSS3新标准选择器用法为现代浏览器添花

< !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>

 

在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>

 

子选择符是我认为非常重要的一个，遗憾的是IE6没有支持

body>.para选择所有的body的孩子中具有类para的元素。

目前使用的body  .para只是选择后代这样很难满足一些要求，尤其对于嵌套标签时，平时遇到不少，指向控制孩子级别的，但是只好用

body .para{设置}在通过 body * .para{还原}之类的，或者给个类啥的。比较麻烦。

 

CSS3还有+这样的 p+span表示后面相邻的。