在介绍它们两个我们首先应该知道这两个符号在CSS文件中充当的是什么角色。在CSS文件中*是通配符选择器，它可以选择文档中所有的元素，也就是说是一个通杀选择器。body是一个普通的类型选择器，只能够选中body这么一个元素。而之所大家会感觉到*和body选择器有时候作用是相同的，主要是因为body是绝大多数布局元素的父元素，如果元素的CSS属性居有继承性的话，那么两者的效果确实一样。例如:
1 2 | body{font-size:12px;}*{font-szie:12px;} |
以上两个代码的作用是完全一样的，因为font-size属性是居右继承性的。但是大家还是要明白它们的原理是不一样的，*选择器确实是选择了每一个元素并且把它们的字体大小设置为12px，body则是通过继承将字体设置为12px的。
在很多CSS页面的开头都有这么一句代码:
1 | *{margin:0;padding:0} |
因为很多元素都有默认的内边距或者外边距，例如body、ul、p和标题元素h1-h6等。使用以上代码可以很轻松的清除所有元素的外边距margin和内边距padding，但是也会带来问题。例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html><html><head> <meta charset=" utf-8"> <title>绿叶学习网</title> <style type="text/css"> *{margin:0px;padding:0px;} input{height:40px;} </style></head><body> <input type="text" name="mytest" /></body></html> |
以上代码可能会造成在一些浏览器中文本框输入的文字显示在左上角，并不是所以浏览器都这样。建议还是使用以下方式来统一定义样式：
1 2 3 | body,ul,h1,h2,h3,h4,h5,h6,form,dl,p{ 样式代码} |
评论