§ ITPOW >> 文档 >> CSS

CSS 中 * 选择符的意义及使用注意

作者:vkvi 来源:ITPOW(原创) 日期:2010-5-21

* 在 CSS 中表示对任意标签均有效,各浏览器均支持。

测试一

<style type="text/css">
*{color:red;}
li{color:blue;}
</style>
 
<ul>
  <li>ITPOW<span>cftea</span></li>
</ul>

效果如下:

CSS 中 * 使用注意

结论:可以看出 * 阻断了 span 的样式从 li 继承,或许这里用“阻断”一词不是很准确,但可以这么理解。

测试二

<style type="text/css">
*{color:red;}
li *{color:blue;}
</style>
 
<ul>
  <li>ITPOW<span>cftea</span></li>
</ul>

效果如下:

CSS 中 * 使用注意

结论:可以看出 li * 表示 li 下面的标签,不包含 li 本身。

测试三

<style type="text/css">
*{color:red;}
ul *{color:blue;}
</style>
 
<ul>
  <li>ITPOW<span>cftea</span></li>
</ul>

效果如下:

CSS 中 * 使用注意

结论:可以看出 ul * 并不代表只影响 ul 下面的一级,还会影响 ul 下一级的下一级。

测试四

<style type="text/css">
a:hover{color:red;}
ul *{color:blue;}
</style>
 
<ul>
  <li>ITPOW<a href="http://www.itpow.com/">cftea</a></li>
</ul>

鼠标移到 cftea 上时,颜色为红色;若去掉 a:hover{color:red;} 这句,则颜色为蓝色。

结论:可以看出 * 影响不到伪类。

相关阅读

相关文章