CSS系列(6) CSS通配符详解
通配符使用星号*表示，意思是“所有的”。
平时使用电脑，比如要搜索C盘里所有的网页，可以使用 *.html来搜索，.html是网页的后缀名，*代表了所有网页的名称；
也就是使用 * 加后缀名，就可以在电脑中搜索文件。
在CSS中，同样使用 * 代表所有的标签或元素，它叫做通配符选择器。
比如：* { color : red; } 这里就把所有元素的字体设置为红色。
*会匹配所有的元素，因此针对所有元素的设置可以使用*来完成，用的最多的例子如下：
*{margin:0px; padding:0px;}
这里是设置所有元素的外边距margin和内边距padding都为0。
不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。
比如
(1)淘宝
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0; padding:0}
(2)腾讯
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
(3)新浪
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
也就是将需要统一设置的元素使用分组选择器一次性设置；
分组选择器的意思就是有相同设置的元素分为一组，使用逗号隔开，这样设置的样式就会对该组所有元素起作用。
*通配符选择器的另一个用法是，给某个元素的后代设置相同的样式，比如要给class=”red”元素的后代设置粗体，让具有类red的后代元素的字体加粗，
.red * { font-weight : bold; }
页面源代码如下：
<html> <head> <style type="text/css"> .red { color:red;} .red * { font-weight : bold; } </style> </head> <body > <div class="red"> <div> 长子div <div> 孙子div </div> </div> </div> </body> </html>
效果：
那么，到底要不要使用通配符选择器呢？
之所以不使用*通配符选择器，主要是因为网页打开速度，也就是性能原因。
但是，对于性能，没有必要考虑的太多，只有当性能确实是个问题的时候，我们再优化也不晚。
这一点，对初学者十分重要，以前我写程序，总是考虑性能，结果是浪费了时间。现在我基本都是怎么快怎么来，任务是有期限的，我们必须要抓紧时间，先把功能实现，后面再想着优化。
因此，对于通配符选择器，只要你有需要，随时可以拿过来用。
不过，一般公司都有封装好的公共样式表，直接拿来用就行了。
本文参考了很多文章，下面是文章名称和地址，感兴趣的可以看一下。
1，CSS * 选择器
http://www.w3school.com.cn/cssref/selector_all.asp
知识点：
(1) * 选择器选取所有元素。
(2) * 选择器也能选取另一个元素中的所有元素。
2，谨慎使用CSS中的星号(*)通配符
http://dudo.org/archives/2010050520544.html
知识点
(1) 当html多层次嵌套时，样式重复继承和渲染的次数增多，影响效率。
结论：
(1) 不要在在深层次的页面结构中使用它;
(2) 不要在页面的根节点使用它；
(3) 不要在距离目标节点较远的节点上使用它;
(4) 最好在父级元素中使用。
3，避免通配选择器
http://www.douban.com/note/315614057/?type=like
知识点：
(1) CSS选择器是从右到左进行规则匹配。与人们阅读顺序相反。
(2) 最右边的规则往往决定了浏览器继续左移匹配的工作量，我们把最右边选择规则称之为关键选择器。
例子：
.selected * {color: red;}浏览器匹配文档中所有的元素后分别向上逐级匹配class为selected的元素，直到文档的根节点，因此其匹配开销是非常大的，通常比开销最小的ID选择器高出1~3个数量级，所以应避免使用关键选择器是通配选择器的规则。
4，CSS通用元素选择器的都市流言
http://shawphy.com/2010/11/css-universal-selector.html
知识点
(1) 由于CSS规则和HTML是并行载入的，因此把CSS放在HEAD中是非常有必要的。
(2) 少使用 :last-child 。因为这个选择器无法索引起来，必须等DOM构件完，才能知道他是不是父元素中最后的那个元素。这种就非常慢了，慎用。
结论：只要有需要，大胆的使用 * 吧，他不会给你从性能上增加额外的麻烦。
5，关于css通配符性能问题不完全测试
http://i.wanz.im/2012/01/03/performance_testing_about_css_universal_selector/
结论：使用*通配符选择器的时间影响很小。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
