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

平时使用电脑，比如要搜索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. UE4的蓝图都能做什么

    创建关卡脚本 蓝图具有和虚幻3中Kismet一样的功能,每个关卡都由自己的蓝图,他可以: 引用和操控actors 控制使用Matinee的过场 管理关卡流,存档点以及其他关卡相关的系统 和关卡中的类蓝 ...

  2. 修改jupyter notebook的工作路径

    两种方法 一 修改jupyter notebook快捷方式的属性 ①根据下图找到jupyter的快捷方式:jupyter notebook→更多→打开文件位置 ②右键打开属性-将目标一栏中最后的%US ...

  3. IOS 自定义代理delegate方法

    创建一个自定义代理 @class MJTgFooterView; /** 1.协议名称: 控件类名 + Delegate 2.代理方法普遍都是@optional 3. */ @protocol MJT ...

  4. python 3+djanjo 2.0.7简单学习(二）--创建数据库和模型

    我们紧接上次,这里将建立数据库,创建第一个模型提示:这里我们不需要去一直启动,django会在我们ctrl+s的时候自动刷新并启动服务,很方便吧  1.数据库配置 现在,打开 vote_mysite/ ...

  5. 机器学习实战之Logistic回归

    Logistic回归一.概述 1. Logistic Regression 1.1 线性回归 1.2 Sigmoid函数 1.3 逻辑回归 1.4 LR 与线性回归的区别 2. LR的损失函数 3. ...

  6. 文本编辑器Vim技巧

    1.  导入文件内容  :r  文件名 2.  插入当前日期  :r  !date 3. :!which ls 4. :r !命令

  7. NodeJS中常见异步接口定义（get、post、jsonp）

    越来越多的人在使用nodeJS,作为一门服务端语言,我们不可避免的要写异步接口(ajax和jsonp).再次强调ajax和jsonp是两个概念,但是由于jquery的封装,使这两种异步接口的调用方式, ...

  8. Git基础篇

    对于Git的一些基础了解,安装,里面的一些名词,这里就不做介绍了.主要记录怎么使用GIt. 本篇介绍: 配置个人信息        生成本地仓库并与远程库相连        添加SSH秘钥       ...

  9. 5.vue解决动态img :src绑定

    前言: 因为静态资源在vue中是需要经过编译的, 所以动态拼接的图片地址,在:src的时候不经过编译. 就会发生图片404,找不到资源. 那么本地图片资源如何动态的绑定呢? 实践: 其实,真相往往就是 ...

  10. http2.2配置

    http: 超文本传输协议,工作在应用层 CentOS 6程序环境:httpd-2.2 配置文件: /etc/httpd/conf/httpd.conf /etc/httpd/conf.d/*.con ...