<!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表示后面相邻的。