通配符使用星号*表示，意思是“所有的”。

平时使用电脑，比如要搜索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通配符详解的更多相关文章

  1. CSS系列 (05)：浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  2. 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的无状态模 ...

  3. Hexo系列(三) 常用命令详解

    Hexo 框架可以帮助我们快速创建一个属于自己的博客网站,熟悉 Hexo 框架提供的命令有利于我们管理博客 1.hexo init hexo init 命令用于初始化本地文件夹为网站的根目录 $ he ...

  4. CSS系列(8) CSS后代选择器和子选择器详解

    一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...

  5. css3笔记系列-3.css中的各种选择器详解，不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  6. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  7. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  8. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  9. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

随机推荐

  1. java 通过接口在后台管理器中生成数据

    需求:测试人员在后台批量添加数据很麻烦,特别是针对一款商品配置了英语,还需要手动添加法语.俄语.阿拉伯语,很麻烦,但是因为没有项目组配合,做个小工具批量生成数据就只有自己去研究了 第一步:通过抓包工具 ...

  2. Cydia Tweak--Cydia Substrate

    http://www.jianshu.com/p/8982e9670fc6 Cydia Substrate.MobileHooker MSHookMessageEx MSHookFunction Mo ...

  3. Uva 12657 双向链表

    题目链接:https://uva.onlinejudge.org/external/126/12657.pdf 题意: 给你一个从1~n的数,然后给你操作方案 • 1 X Y : move box X ...

  4. TypeScript学习－TypeScript环境配置

    http://blog.csdn.net/shi_weihappy/article/details/49332091

  5. jQuery实现轮播切换以及将其封装成插件（3）

    在前两篇博文中,我们写了一个普通的轮播切换.但是我们不能每一次需要这个功能就把这些代码有重新敲一次.下面我们就将它封装成一个插件. 至于什么是插件,又为什么要封装插件,不是本文考虑的内容.  我们趁着 ...

  6. C# do while语句

    一.C# do while语句 do while语句是先执行一次循环体,然后再判断是否需要重复执行循环体的循环控制语句. 语法格式如下: do{    embedded-statement}while ...

  7. ES6初识- Class

    { //基本定义和生成实例 class Parent{ //构造函数 constructor(name='lisi'){ this.name=name; } //属性get,set get longN ...

  8. 虚拟机VMware安装Kali Linux

    本文讲解如何在虚拟机上安装Kali Linux,希望对大家有所帮助. 准备:一台电脑,VMware(VMware安装教程) 一.下载系统镜像文件 1.首先下载系统镜像,进入kali官网,在Downlo ...

  9. redis源代码结构解析

    看了黄建宏老师的<Redis设计与实现>,对redis的部分实现有了一个简明的认识: 之前面试的时候被问到了这部分的内容,没有关注,好在还有时间,就把Redis的源码看了一遍. Redis ...

  10. Linux下 VI 编辑器操作

    VI编辑器的三种模式:命令模式.输入模式.末行模式. 1.命令模式:vi启动后默认进入的是命令模式,从这个模式使用命令可以切换到另外两种模式,同时无论在何种模式下,[Esc]键都可以回到命令模式.在命 ...