里面講到了CSS3中多種通過(guò)符的使用方法，如星號(hào)（*）、脫字符（^）和美元符號(hào)（$）等。而由于星號(hào)(*)在CSS2.x中已經(jīng)得到多數(shù)瀏覽器的支持，所以其使用范圍最廣。

我們最常見(jiàn)的星號(hào)（*）使用方法就是：



這種方法很實(shí)用，由于不同瀏覽器對(duì)于同樣的頁(yè)面元素有不同的默認(rèn)樣式，所以使用通配符星號(hào)（*）先將所有可能影響布局的默認(rèn)樣式統(tǒng)一一下是下十分必要的。而星號(hào)（*）匹配所有元素，省去了一個(gè)一個(gè)去寫(xiě)元素名稱的麻煩。

我相信應(yīng)該有不少人在使用這種方法吧。dudo博客主題之前存在在不是瀏覽器下字體不統(tǒng)一的情況，于是我就使用星號(hào)（*）通配符來(lái)實(shí)現(xiàn)這樣的效果。

但是……這個(gè)方法真的就可以讓我們一勞永逸了嗎？我們來(lái)看一個(gè)例子。下面是一段多層嵌套的XHTML代碼（我想這比實(shí)際應(yīng)用中的嵌套次數(shù)少得多了）：


我使用的CSS代碼很簡(jiǎn)單：

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

在右圖我們看到從HTML標(biāo)簽到div#d1最后到div#d5都被賦予了一個(gè)color:red的屬性。也就是說(shuō)空白元素也有了屬性。可能有人會(huì)說(shuō)，這很正常啊，因?yàn)槟闶褂玫氖峭ㄅ浞翘?hào)（*）嘛，星號(hào)（*）自然通配所有的標(biāo)簽了。但是你應(yīng)該仔細(xì)看前面的“Inherited frome”，它不僅僅是通過(guò)星號(hào)（*）來(lái)指定，他還會(huì)一層一層地繼承下去。而且星號(hào)（*）的優(yōu)先級(jí)是很高的，他的作用域很大。所以，你的頁(yè)面層次越復(fù)雜，重復(fù)繼承和渲染的次數(shù)就越多。

這會(huì)有什么樣的后果呢？影響性能！不過(guò)，這不是296、386的時(shí)代，現(xiàn)在的計(jì)算機(jī)對(duì)于點(diǎn)東西來(lái)說(shuō)是簡(jiǎn)直是小菜，如果你不是那么在乎完全可以忽略。不過(guò)對(duì)于要求苛刻的設(shè)計(jì)來(lái)著，這樣的東西也是絕對(duì)不允許出現(xiàn)的。

那么星號(hào)（*）通配符是不是就不能用，或者越少用越好呢？當(dāng)然不是！不過(guò)要堅(jiān)持這樣的原則：不要在在深層次的頁(yè)面結(jié)構(gòu)中使用它；不要在頁(yè)面的根節(jié)點(diǎn)使用它；不要在距離目標(biāo)節(jié)點(diǎn)較遠(yuǎn)的節(jié)點(diǎn)上使用它。最好在父級(jí)元素中使用。這樣效果和性能可以兼得。

可能以前有過(guò)類(lèi)似的討論，但是我沒(méi)有找到相關(guān)的詳細(xì)介紹文章，歡迎大家指點(diǎn)。

通配符在CSS2中就得到支持了，如果只有兩三層的話使用星號(hào)（*）很方便，嵌套多了就有上面的問(wèn)題了

最新評(píng)論