謹慎使用CSS中的星號(*)通配符

2024-07-11 08:26:36

字體：大中小

來源：轉載

供稿：網友

里面講到了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>Vevb.com</div>
</div>
</div>
</div>
</div>
</div>

我使用的CSS代碼很簡單：

復制代碼

代碼如下:
* {color:red;}

在瀏覽器中的效果就是把dudo.org這個字符串顯示為紅色。那么我們使用Chrome瀏覽器中自帶的開發者工具看看瀏覽器是怎么來渲染的：

CSS星號通配符在瀏覽器的渲染過程
在右圖我們看到從HTML標簽到div#d1最后到div#d5都被賦予了一個color:red的屬性。也就是說空白元素也有了屬性。可能有人會說，這很正常啊，因為你使用的是通配符星號（*）嘛，星號（*）自然通配所有的標簽了。但是你應該仔細看前面的“Inherited frome”，它不僅僅是通過星號（*）來指定，他還會一層一層地繼承下去。而且星號（*）的優先級是很高的，他的作用域很大。所以，你的頁面層次越復雜，重復繼承和渲染的次數就越多。