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/
结论：使用*通配符选择器的时间影响很小。
CSS系列(6) CSS通配符详解的更多相关文章
- CSS系列 (05)：浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
- ASP.NET MVC深入浅出系列(持续更新) ORM系列之Entity FrameWork详解（持续更新） 第十六节：语法总结(3)(C#6.0和C#7.0新语法) 第三节：深度剖析各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字 各种通讯连接方式 设计模式篇 第十二节: 总结Quartz.Net几种部署模式(IIS、Exe、服务部署【借
ASP.NET MVC深入浅出系列(持续更新) 一. ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模 ...
- Hexo系列(三) 常用命令详解
Hexo 框架可以帮助我们快速创建一个属于自己的博客网站,熟悉 Hexo 框架提供的命令有利于我们管理博客 1.hexo init hexo init 命令用于初始化本地文件夹为网站的根目录 $ he ...
- CSS系列(8) CSS后代选择器和子选择器详解
一.CSS后代选择器详解 1, 生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...
- css3笔记系列-3.css中的各种选择器详解，不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- CSS引入方式的区别详解
在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
随机推荐
- MAC读取希捷移动硬盘ntfs
希捷提供了mac读取ntfs磁盘的软件,Paragon. 搜索关键词 "希捷" "mac" 或者通过以下链接进入 https://www.seagate.com ...
- April 16 2017 Week 16 Sunday
Happiness is a way station between too much and too little. 幸福就是刚刚好. I don't want to talk about it a ...
- java常用输出技巧，debug
package control; import javax.swing.JFrame; public class DebugTest { public static void main(String[ ...
- 轻量级HTTP服务器Nginx（配置与调试Nginx维护Nginx）
轻量级HTTP服务器Nginx(配置与调试Nginx) 文章来源于南非蚂蚁 Nginx安装完毕后,会产生相应的安装目录,根据前面的安装路径,Nginx的配置文件路径为/opt/nginx/conf ...
- CentOS下用rinetd做端口转发
windows下的端口转发一般用的是自带的nat和porttunnel.portmap linux下端口转发映射的程序叫rinetd,启动方法rinetd -c /etc/rinetd.conf , ...
- window/win7/wamp下安装Xdebug
1.写一个php文件,输出phpinfo(); 然后把该页面Ctrl+A全选,然后贴到http://xdebug.org/wizard.php这个地址的文本框里,他会自动检查你的配置,然后告诉你用哪个 ...
- R 语言爬虫 之 cnblog博文爬取
Cnbolg Crawl a). 加载用到的R包 ##library packages needed in this case library(proto) library(gsubfn) ## Wa ...
- System.Web.UI.Page
mdsn:点击查看此类介绍 git: 点击查看封装方法 消息弹框,消息弹框跳转,自定义脚本信息 定义:表示一个从托管 ASP.NET Web 应用程序的服务器请求的 .aspx 文件(也称为 ...
- ipython notebook超级好用
这个东西超级好用,以后要以c++和python为主要沟通语言了.
- java基础 静态 static 问在多态中，子类静态方法覆盖父类静态方法时，父类引用调用的是哪个方法？
多态 package com.swift.jiekou; public class Jicheng_Tuotai_jingtai_diaoyong { public static void main( ...