html中红色星号,谨慎使用CSS中的星号(*)通配符
里面講到了CSS3中多種通過符的使用方法,如星號(*)、脫字符(^)和美元符號($)等。而由于星號(*)在CSS2.x中已經得到多數瀏覽器的支持,所以其使用范圍最廣。
我們最常見的星號(*)使用方法就是:
復制代碼代碼如下:
* {padding:0;margin:0;font-family:…}
這種方法很實用,由于不同瀏覽器對于同樣的頁面元素有不同的默認樣式,所以使用通配符星號(*)先將所有可能影響布局的默認樣式統一一下是下十分必要的。而星號(*)匹配所有元素,省去了一個一個去寫元素名稱的麻煩。
我相信應該有不少人在使用這種方法吧。dudo博客主題之前存在在不是瀏覽器下字體不統一的情況,于是我就使用星號(*)通配符來實現這樣的效果。
但是……這個方法真的就可以讓我們一勞永逸了嗎?我們來看一個例子。下面是一段多層嵌套的XHTML代碼(我想這比實際應用中的嵌套次數少得多了):
復制代碼代碼如下:
jb51.net我使用的CSS代碼很簡單:
復制代碼代碼如下:
* {color:red;}
在瀏覽器中的效果就是把dudo.org這個字符串顯示為紅色。那么我們使用Chrome瀏覽器中自帶的開發者工具看看瀏覽器是怎么來渲染的:
在右圖我們看到從HTML標簽到div#d1最后到div#d5都被賦予了一個color:red的屬性。也就是說空白元素也有了屬性??赡苡腥藭f,這很正常啊,因為你使用的是通配符星號(*)嘛,星號(*)自然通配所有的標簽了。但是你應該仔細看前面的“Inherited frome”,它不僅僅是通過星號(*)來指定,他還會一層一層地繼承下去。而且星號(*)的優先級是很高的,他的作用域很大。所以,你的頁面層次越復雜,重復繼承和渲染的次數就越多。
這會有什么樣的后果呢?影響性能!不過,這不是296、386的時代,現在的計算機對于點東西來說是簡直是小菜,如果你不是那么在乎完全可以忽略。不過對于要求苛刻的設計來著,這樣的東西也是絕對不允許出現的。
那么星號(*)通配符是不是就不能用,或者越少用越好呢?當然不是!不過要堅持這樣的原則:不要在在深層次的頁面結構中使用它;不要在頁面的根節點使用它;不要在距離目標節點較遠的節點上使用它。最好在父級元素中使用。這樣效果和性能可以兼得。
可能以前有過類似的討論,但是我沒有找到相關的詳細介紹文章,歡迎大家指點。
通配符在CSS2中就得到支持了,如果只有兩三層的話使用星號(*)很方便,嵌套多了就有上面的問題了
總結
以上是生活随笔為你收集整理的html中红色星号,谨慎使用CSS中的星号(*)通配符的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html5app微信登陆,基于h5+的微
- 下一篇: 2021高考一诊成绩查询,双流棠湖中学高