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/

结论:使用*通配符选择器的时间影响很小。

时间: 2024-10-09 20:16:42

CSS系列(6) CSS通配符详解的相关文章

Nginx知多少系列之(三)配置文件详解

原文:Nginx知多少系列之(三)配置文件详解 目录 1.前言 2.安装 3.配置文件详解 4.工作原理 5.Linux下托管.NET Core项目 6.Linux下.NET Core项目负载均衡 7.Linux下.NET Core项目Nginx+Keepalived高可用(主从模式) 8.Linux下.NET Core项目Nginx+Keepalived高可用(双主模式) 9.Linux下.NET Core项目LVS+Keepalived+Nginx高可用集群 10.构建静态服务器 11.日志

我给女朋友讲编程CSS系列(4) CSS盒子模型

什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school.com.cn/css/css_boxmodel.asp 接着把[CSS内边距],[CSS外边距],[CSS外边距合并]看看. 小结: (1)    一般,在样式表中,都会先把所有元素的外边距和内边距设置为0 * {   margin: 0;  padding: 0;  } * 是通配符,就是一个符

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style type="text/css"> h1 {color:red; font-size:14px;} </style> </head> <body > <h1>使用Css让h1标签字体变红</h1> </body> &

OAF_OAF EO系列增删改 - Delete详解和实现(案例)

2014-06-14 BaoXinjian 一.摘要 在OAF中,似乎不是根据你光标所在的行来删除对应的记录,而是根据记录指针来删除,而这个指针又与你的光标位置无关需要用代码来精确的定位.因此我们在删除记录时,需要编写一定的代码来实现. User’s Guide中提供了一种标准的删除方法,通过在在当前记录集中用指针进行循环来定位需要删除的记录(例子提供的是只删一条). 不管如何删除,总的实现思路如下: Step1. 首先给需要删除的记录做标记:  要么打勾选上,要么在行上放个图标按钮来点火,总之

java io系列12之 BufferedInputStream详解

目录1. BufferedInputStream 介绍2. BufferedInputStream 源码分析(基于jdk1.7.40)3. 示例代码 BufferedInputStream 是缓冲输入流.它继承于FilterInputStream. BufferedInputStream 的作用是为另一个输入流添加一些功能,例如,提供"缓冲功能"以及支持"mark()标记"和"reset()重置方法".BufferedInputStream 本质

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

一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> <p>这个p标签是div的后代</p> <div> 后代选择器就是用来选择一个标签的后代的: 两个选择器中间添加一个[空格]就构成了后代选择器,空格后面的那个是后代. 例如: div p { color : red; } 它会选择一堆的p标签,只要这个p标签是嵌套在某个div标签内

css动画-animation各个属性详解(转)

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

CSS position overflow float 属性 详解

position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过