dudo博客

我的博客前期文章中有不少关于CSS方面的文章,特别是在关于CSS3的文章中都提到了通配符的使用(如果你对CSS3中的选择符使用感兴趣可以参考我翻译的详解CSS3中的属性选择符)。里面讲到了CSS3中多种通过符的使用方法,如星号(*)、脱字符(^)和美元符号($)等。而由于星号(*)在CSS2.x中已经得到多数浏览器的支持,所以其使用范围最广。

我们最常见的星号(*)使用方法就是:

* {padding:0;margin:0;font-family:…}

这种方法很实用,由于不同浏览器对于同样的页面元素有不同的默认样式,所以使用通配符星号(*)先将所有可能影响布局的默认样式统一一下是下十分必要的。而星号(*)匹配所有元素,省去了一个一个去写元素名称的麻烦。

我相信应该有不少人在使用这种方法吧。dudo博客主题之前存在在不是浏览器下字体不统一的情况,于是我就使用星号(*)通配符来实现这样的效果。

但是……这个方法真的就可以让我们一劳永逸了吗?我们来看一个例子。下面是一段多层嵌套的XHTML代码(我想这比实际应用中的嵌套次数少得多了):

  <div id="d1">
    <div id="d2">
        <div id="d3">
            <div id="d4">
                <div id="d5">
                    <div>dudo.org</div>
                </div>
            </div>
        </div>
    </div>
  </div>

我使用的CSS代码很简单:

* {color:red;}

在浏览器中的效果就是把dudo.org这个字符串显示为红色。那么我们使用Chrome浏览器中自带的开发者工具看看浏览器是怎么来渲染的:

CSS星号通配符在浏览器的渲染过程在右图我们看到从HTML标签到div#d1最后到div#d5都被赋予了一个color:red的属性。也就是说空白元素也有了属性。可能有人会说,这很正常啊,因为你使用的是通配符星号(*)嘛,星号(*)自然通配所有的标签了。但是你应该仔细看前面的“Inherited frome”,它不仅仅是通过星号(*)来指定,他还会一层一层地继承下去。而且星号(*)的优先级是很高的,他的作用域很大。所以,你的页面层次越复杂,重复继承和渲染的次数就越多。

这会有什么样的后果呢?影响性能!不过,这不是296、386的时代,现在的计算机对于点东西来说是简直是小菜,如果你不是那么在乎完全可以忽略。不过对于要求苛刻的设计来着,这样的东西也是绝对不允许出现的。

那么星号(*)通配符是不是就不能用,或者越少用越好呢?当然不是!不过要坚持这样的原则:不要在在深层次的页面结构中使用它;不要在页面的根节点使用它;不要在距离目标节点较远的节点上使用它。最好在父级元素中使用。这样效果和性能可以兼得。

可能以前有过类似的讨论,但是我没有找到相关的详细介绍文章,欢迎大家指点。



共有(35)条评论

网络人生 发表于 2010-5-05 at 21:03 #1楼

第一次知道css还有通配符的概念。
即使是罗列所有元素、ID、类名,也不是一件太麻烦的事。而且便于维护。

[回复]

dudo 回复:

@网络人生, 通配符在CSS2中就得到支持了,如果只有两三层的话使用星号(*)很方便,嵌套多了就有上面的问题了

[回复]

网络人生 回复:

@dudo, 呵呵,只会一点CSS皮毛。

[回复]


一米 发表于 2010-5-05 at 22:56 #2楼

*是要少用的,多少对性能有点影响的,以前在用,现在都舍弃了。

[回复]

dudo 回复:

@一米, 嗯,之前没发现,直到最近几天通过开发工具才注意到出现了很多冗余,后来在自己博客以前的文章中发现曾经提到过这个问题,呵呵

[回复]


笨笨 发表于 2010-5-06 at 09:08 #3楼

呵呵只是了解点基本的,这些专业术语还有待学习啊。

[回复]

dudo 回复:

@笨笨, 我也只是懂个皮毛啊

[回复]


混生 发表于 2010-5-06 at 11:15 #4楼

完全不会用CSS。呵呵

[回复]

dudo 回复:

@混生, 哈哈……不必什么都懂,皮肤修修改改就行了

[回复]


海派 发表于 2010-5-06 at 11:44 #5楼

关注。。

[回复]


关注Java 发表于 2010-5-06 at 15:01 #6楼

额 貌似我经常用

[回复]

dudo 回复:

@关注Java, 呵呵,应该减少使用

[回复]


关注Java 发表于 2010-5-06 at 17:10 #7楼

老大 弄个可以留言的地方吧。总在你的文章里说话不大适合。

我们交换链接吧。我的博客你也去看过咯。
你的博客我在首页上已经加上了。
我的

博名: 关注Java
地址: http://www.gbsou.com

期盼出现在您的首页。

[回复]

dudo 回复:

@关注Java, 谢谢提醒,我的模板上没有页面的留言功能,现在添加上了……

[回复]


私服 发表于 2010-5-07 at 10:49 #8楼

以后要注意了~

[回复]


万戈 发表于 2010-5-07 at 12:14 #9楼

恩,星号还是少用为妙,我就是不用的

[回复]


爱科学 发表于 2010-5-07 at 17:40 #10楼

图片能够正常显示了 欢迎回访

[回复]

飞猪 回复:

@爱科学,
是滴,这里图片也能正常显示~

[回复]


陆少博 发表于 2010-5-07 at 19:38 #11楼

通用符。少用为好。

[回复]


iOver 发表于 2010-5-07 at 20:23 #12楼

第一次来~感觉好专业。
最近在学CSS,正好学习了。感谢~
加油~

[回复]

dudo 回复:

@iOver, :-) CSS博大精深,嘿嘿 ,得下细功夫慢慢学

[回复]


耗子 发表于 2010-5-12 at 02:55 #13楼

从我写的这么多年的代码来看,没有什么问题,现在的机器对这个早不在意了。现在一些大型网站,像迅雷都是用*来初始化网页的。没办法,浏览器太多,如果不初始化一下,很可能产生很多稀奇古怪的问题

[回复]

dudo 回复:

@耗子, 的确是,现在机器的性能完全可以忽略了,但是在使用工具调整的时候显得相当难看,在之前我翻译过一篇文章是关于去除默认样式的,用那个会更合理些

[回复]


Ghost 发表于 2010-5-13 at 13:07 #14楼

的确是会遍历所有的标签,不过本文所遇到的是另一个问题——“继承”,才会出现重复继承的问题。并不是所有的定义都会被继承的。我一般只使用*{margin:0;padding:0},其它定义是不会加进去的。

一篇关于继承的文章:http://www.cssforest.org/blog/index.php?id=164

[回复]


crusher 发表于 2010-5-14 at 21:06 #15楼

目前还没有发现*出现过什么问题

[回复]


灰狼 发表于 2010-5-15 at 11:18 #16楼

通配符,一般就是margin和padding

[回复]


卡布奇诺 发表于 2010-5-23 at 21:51 #17楼

原来是这个样子啊

[回复]


css教程 发表于 2010-6-16 at 00:24 #18楼

感觉CSS就是要用最少的代码做最多的事情

[回复]


crusher website 发表于 2010-8-05 at 16:17 #19楼

对于*号 的使用,只要你认为好用就行,用在适当的地方是非常好的,可以省不少事情

[回复]


stone crusher 发表于 2010-8-09 at 11:54 #20楼

*是要少用的,多少对性能有点影响的,以前在用,现在用的少了。

[回复]


crusher 发表于 2010-9-16 at 14:47 #21楼

写的不错,掌握很多东西,支持一下

[回复]


vertical roller mill 发表于 2010-10-25 at 11:06 #22楼

目前还没有遇上什么问题,但看到你的文章之后,决定以后少用

[回复]


Kam 发表于 2011-2-12 at 22:46 #23楼

这个我了解过,不过不太熟悉,也知道有类似html {}这样的css,之前也在腾讯的网页上看到过这样的css
div,p,h1,h2,h3,h4,h5,ul,li {padding:0;margin:0;}
这样类似的写法,应该也是为了不同浏览器之间的兼容性,不过如果按照dudo的说法使用*通配符的话,虽然代码是简洁了不少,但是却产生了多重重复的无效作用,比起这个,还是觉得分开定义会比较好点,呵呵!

[回复]


好好 发表于 2012-10-21 at 10:15 #24楼

这个只是标明来源了 继承关系

与性能无关, 不管你写多少CSS,
每个容器都要渲染.
不写也会按默认渲染

[回复]


好好 发表于 2012-10-21 at 10:20 #25楼

http://i.wanz.im/2012/01/03/performance_testing_about_css_universal_selector/

经过多次测试,…从对比数据中我们可以看出,…而通配符选择器是对所有标签做了yui reset中所有样式的reset,即使做了比yui reset更多样式重置,但是渲染时间依然还是比yui reset少

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量