我们最常见的星号(*)使用方法就是:
复制代码代码如下:
* {padding:0;margin:0;font-family:…}
这种方法很实用,由于不同浏览器对于同样的页面元素有不同的默认样式,所以使用通配符星号(*)先将所有可能影响布局的默认样式统一一下是下十分必要的。而星号(*)匹配所有元素,省去了一个一个去写元素名称的麻烦。
我相信应该有不少人在使用这种方法吧。dudo博客主题之前存在在不是浏览器下字体不统一的情况,于是我就使用星号(*)通配符来实现这样的效果。
但是……这个方法真的就可以让我们一劳永逸了吗?我们来看一个例子。下面是一段多层嵌套的XHTML代码(我想这比实际应用中的嵌套次数少得多了):
复制代码代码如下:
<div id="d1">
<div id="d2">
<div id="d3">
<div id="d4">
<div id="d5">
<div>jb51.net</div>
</div>
</div>
</div>
</div>
</div>
我使用的CSS代码很简单:
复制代码代码如下:
* {color:red;}
在浏览器中的效果就是把dudo.org这个字符串显示为红色。那么我们使用Chrome浏览器中自带的开发者工具看看浏览器是怎么来渲染的:
在右图我们看到从HTML标签到div#d1最后到div#d5都被赋予了一个color:red的属性。也就是说空白元素也有了属性。可能有人会说,这很正常啊,因为你使用的是通配符星号(*)嘛,星号(*)自然通配所有的标签了。但是你应该仔细看前面的“Inherited frome”,它不仅仅是通过星号(*)来指定,他还会一层一层地继承下去。而且星号(*)的优先级是很高的,他的作用域很大。所以,你的页面层次越复杂,重复继承和渲染的次数就越多。
这会有什么样的后果呢?影响性能!不过,这不是296、386的时代,现在的计算机对于点东西来说是简直是小菜,如果你不是那么在乎完全可以忽略。不过对于要求苛刻的设计来着,这样的东西也是绝对不允许出现的。
那么星号(*)通配符是不是就不能用,或者越少用越好呢?当然不是!不过要坚持这样的原则:不要在在深层次的页面结构中使用它;不要在页面的根节点使用它;不要在距离目标节点较远的节点上使用它。最好在父级元素中使用。这样效果和性能可以兼得。
可能以前有过类似的讨论,但是我没有找到相关的详细介绍文章,欢迎大家指点。
通配符在CSS2中就得到支持了,如果只有两三层的话使用星号(*)很方便,嵌套多了就有上面的问题了
CSS,星号,通配符
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。