CSS通配符选择器详解
通配符使用星号*表示，意思是“所有的”。
基础知识
- 01
通配符使用星号*表示，意思是“所有的”。 平时使用电脑，比如要搜索C盘里所有的网页，可以使用 *.html来搜索，.html是网页的后缀名，*代表了所有网页的名称； 也就是使用 * 加后缀名，就可以在电脑中搜索文件。
- 02
在CSS中，同样使用 * 代表所有的标签或元素，它叫做通配符选择器。 比如：* { color : red; } 这里就把所有元素的字体设置为红色。 *会匹配所有的元素，因此针对所有元素的设置可以使用*来完成，用的最多的例子如下： *{margin:0px; padding:0px;} 这里是设置所有元素的外边距margin和内边距padding都为0。
停止使用通配符选择器
- 01
不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。
- 02
淘宝 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}
- 03
腾讯 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
- 04
新浪 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
- 05
也就是将需要统一设置的元素使用分组选择器一次性设置； 分组选择器的意思就是有相同设置的元素分为一组，使用逗号隔开，这样设置的样式就会对该组所有元素起作用。
给后代设置相同样式
- 01
*通配符选择器的另一个用法是，给某个元素的后代设置相同的样式，比如要给class="red”元素的后代设置粗体，让具有类red的后代元素的字体加粗， .red * { font-weight : bold; } 比如新建a.html，复制下面的源代码
- 02
<html> <head> <style type="text/css"> .red { color:red;} .red * { font-weight : bold; } </style> </head> <body > <div> <div> 长子div <div> 孙子div </div> </div> </div> </body> </html>
- 03
效果如下
结论
- 01
那么，到底要不要使用通配符选择器呢？ 之所以不使用*通配符选择器，主要是因为网页打开速度，也就是性能原因。 但是，对于性能，没有必要考虑的太多，只有当性能确实是个问题的时候，我们再优化也不晚。
- 02
这一点，对初学者十分重要，以前我写程序，总是考虑性能，结果是浪费了时间。现在我基本都是怎么快怎么来，任务是有期限的，我们必须要抓紧时间，先把功能实现，后面再想着优化。
- 03
因此，对于通配符选择器，只要你有需要，随时可以拿过来用。 不过，一般也就是使用这一句啊，*{margin:0px; padding:0px;}