CSS系列(6) CSS通配符詳解

時間  2019-11-29
標籤 css 系列 通配符 詳解 欄目 CSS 简体版
原文   原文鏈接

 

通配符使用星號*表示，意思是「全部的」。css

 

平時使用電腦，好比要搜索C盤裏全部的網頁，可使用 *.html來搜索，.html是網頁的後綴名，*表明了全部網頁的名稱；html

 

也就是使用 * 加後綴名，就能夠在電腦中搜索文件。瀏覽器

 

在CSS中，一樣使用 * 表明全部的標籤或元素，它叫作通配符選擇器。性能

 

好比：* { color : red; } 這裏就把全部元素的字體設置爲紅色。測試

 

*會匹配全部的元素，所以針對全部元素的設置可使用*來完成，用的最多的例子以下：字體

*{margin:0px; padding:0px;}優化

這裏是設置全部元素的外邊距margin和內邊距padding都爲0。spa

 

不過，因爲*會匹配全部的元素，這樣會影響網頁渲染的時間，所以不少人開始中止使用*通配符選擇器，取而代之的是，把全部須要統一設置的元素，放在一塊兒，一塊設置。ssr

 

好比code

 

(1)淘寶

 

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0;       padding:0}

 

 

 

(2)騰訊

 

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

 

 

(3)新浪

 

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

 

 

 

也就是將須要統一設置的元素使用分組選擇器一次性設置；

 

分組選擇器的意思就是有相同設置的元素分爲一組，使用逗號隔開，這樣設置的樣式就會對該組全部元素起做用。

 

 

*通配符選擇器的另外一個用法是，給某個元素的後代設置相同的樣式，好比要給class=」red」元素的後代設置粗體，讓具備類red的後代元素的字體加粗，

.red * { font-weight : bold; }

 

頁面源代碼以下：

 

<html>

<head>

 

<style type="text/css">

 

.red { color:red;}

.red * { font-weight : bold; }

 

</style>

</head>

<body >

 

  <div class="red"> 

    <div> 

       長子div

          <div>

          孫子div

          </div>

    </div>   

  </div>

 

</body>

</html>

 

 

效果：

 

                       

 

 

那麼，到底要不要使用通配符選擇器呢？

 

之因此不使用*通配符選擇器，主要是由於網頁打開速度，也就是性能緣由。

 

可是，對於性能，沒有必要考慮的太多，只有當性能確實是個問題的時候，咱們再優化也不晚。

 

這一點，對初學者十分重要，之前我寫程序，老是考慮性能，結果是浪費了時間。如今我基本都是怎麼快怎麼來，任務是有期限的，咱們必需要抓緊時間，先把功能實現，後面再想着優化。

 

所以，對於通配符選擇器，只要你有須要，隨時能夠拿過來用。

 

不過，通常公司都有封裝好的公共樣式表，直接拿來用就好了。

 

 

 

 

本文參考了不少文章，下面是文章名稱和地址，感興趣的能夠看一下。

 

 

 

1，CSS * 選擇器

http://www.w3school.com.cn/cssref/selector_all.asp

知識點：

(1) * 選擇器選取全部元素。

(2) * 選擇器也能選取另外一個元素中的全部元素。

 

 

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

http://dudo.org/archives/2010050520544.html

知識點

(1)    當html多層次嵌套時，樣式重複繼承和渲染的次數增多，影響效率。

 

結論：

(1)    不要在在深層次的頁面結構中使用它;

(2)    不要在頁面的根節點使用它；

(3)    不要在距離目標節點較遠的節點上使用它;

(4)    最好在父級元素中使用。

 

 

3，避免通配選擇器

http://www.douban.com/note/315614057/?type=like

知識點：

(1)    CSS選擇器是從右到左進行規則匹配。與人們閱讀順序相反。

(2)    最右邊的規則每每決定了瀏覽器繼續左移匹配的工做量，咱們把最右邊選擇規則稱之爲關鍵選擇器。

例子：

.selected * {color: red;}瀏覽器匹配文檔中全部的元素後分別向上逐級匹配class爲selected的元素，直到文檔的根節點，所以其匹配開銷是很是大的，一般比開銷最小的ID選擇器高出1~3個數量級，因此應避免使用關鍵選擇器是通配選擇器的規則。

 

 

 

4，CSS通用元素選擇器的都市流言

http://shawphy.com/2010/11/css-universal-selector.html

知識點

(1)    因爲CSS規則和HTML是並行載入的，所以把CSS放在HEAD中是很是有必要的。

(2)    少使用 :last-child 。由於這個選擇器沒法索引發來，必須等DOM構件完，才能知道他是否是父元素中最後的那個元素。這種就很是慢了，慎用。

結論：只要有須要，大膽的使用 * 吧，他不會給你從性能上增長額外的麻煩。

 

 

5，關於css通配符性能問題不徹底測試

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

結論：使用*通配符選擇器的時間影響很小。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程