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

平时使用电脑，比如要搜索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. 出现Permission denied的解决办法

    出处 https://blog.csdn.net/qq_16525279/article/details/80245350 提示 Permission denied 解决的办法: $ sudo chm ...

  2. 单步调试理解webpack里通过require加载nodejs原生模块实现原理

    在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块. 原生模块的加载,比如: const path = require("path" ...

  3. Selenium入门20 等待时间

    自动化过程中有的页面元素加载慢或者需要等待特定条件执行后续步骤,此时需添加等待时间: 1 time.sleep()  固定等待时间,需import time 2 webdriver隐式等待 无需引入包 ...

  4. 97: Address family not supported by protocol，nginx服务启动失败

    1.启动nginx服务报错 环境:centos 6.9,yum安装的nginx,启动报错 [root@lnmp ~]# nginx -tnginx: the configuration file /e ...

  5. 【转】css行高line-height的一些深入理解及应用

    一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

  6. 【洛谷P1962】斐波那契数列

    斐波那契数列 题目链接:https://www.luogu.org/problemnew/show/P1962 矩阵A 1,1 1,0 用A^k即可求出feb(k). 矩阵快速幂 #include&l ...

  7. ztree3.5中checkbox无法取消选中的问题解决

    使用jquery的tree插件ztree,用到复选框的功能 var setting = { check: { enable: true }, data: { simpleData: { enable: ...

  8. Spring 学习之依赖注入

    什么是依赖关系? 纵观所有的Java 应用,从基于Applet的小应用到多层次结构的企业级别的应用,他们都是一种典型的依赖性应用,也就是由一些互相协作的对象构成的,Spring把这种互相协作的关系称之 ...

  9. MyString类的实现--基础中的基础C语言

    MyString 类是学习 C++ 的过程中一个很重要的例子,涉及到面向对象的封装.堆内存申请和释放.函数的重载以及 C++ 的 “Big Three”.本例子重点在于复习和理解上述的 C++ 特性, ...

  10. nop 插件解析

    在计算领域,插件( plug-in or plugin)是将特定的功能增加到大型软件中的软件组件. nopCommerce插件用来扩展nopCommerce的功能.nopCommerce 有几种插件. ...