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

平时使用电脑，比如要搜索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. 如何使用ABAP代码反序列化JSON字符串成ABAP结构

    假设我有这个JSON字符串如下图所示: 我的任务是解析出上图黑色方框里的几个字段,比如ObjectID, ETag, BuyerID, DateTime, ID, Name等等,把它们的值存储到对应A ...

  2. framework7 可以拉动右侧工具栏和点击当前item就可以出发事件的HTML结构

    <li class="swipeout"> <div class="swipeout-content item-content"> &l ...

  3. 【转】Data URL和图片，及Data URI的利弊

    Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...

  4. 检测pycaffe安装好没

    进入python然后import caffe,如果没报错就表示安装好了

  5. HttpContext.RewritePath

    定义:使用给定路径重写 URL.就是可以跳转到指定的URL. 也可以做为伪静态的跳转.具体如下. 他的重载 ①新建一个页面,放两个链接到另一个页面,注意给的链接 ②在 global.asax 文件中 ...

  6. 在windows7上配置xampp虚拟主机

    在设置之前最好关闭xampp1.修改hosts文件进入C:\Windows\System32\drivers\etc目录,找到hosts文件.在# Localhost (DO NOT REMOVE) ...

  7. swiper轮播始终居中active图片

    用的是vue-awesome-swiper 在vue项目中,参数方法与swiper一致.使用场景如下: 左侧小图一共八张,默认显示的是三张,始终保持activeimg在中间,提升用户体验度.swipe ...

  8. Spring框架基础2

    Spring框架基础2 测试Spring的AOP思想和注解的使用 导包(在前面的基础上添加) SpringAOP名词解释 AOP编程思想:横向重复代码,纵向抽取:就是说多个地方重复的代码可以抽取出来公 ...

  9. ethereum(以太坊)(十一)--字节数组(一)

    pragma solidity ^0.4.0; contract byte1{ /* 固定大小字节数组(Fixed-size byte arrays) 固定大小字节数组可以通过bytes1,bytes ...

  10. PHP 日期处理函数 date() 、mktime()

    一.前言 php是世界上最好的语言! 二.介绍 mktime()函数获取当周\当天\当月 /** * 微程-日期工具函数 week: 当周 day: 当天 month: 当月 * @author 狗蛋 ...