在 Mozilla UI 中書寫高效率 CSS - 建站學院 - 源碼網

在 Mozilla UI 中書寫高效率 CSS(2010-03-22)

以下文檔描述了應用在 Mozilla UI 中優化 CSS 文件的規則。第一部分是對于 Mozilla 樣式系統分類規則的一般性討論。在了解這個系統的基礎上,后續部分包含了一些指南,書寫可以利用這個樣式系統實踐優點的樣式的指南。

樣式系統如何分類規則

樣式系統把規則分為四大類。理解這些類是很重要的,因為對于規則的匹配來說他們是首先要考慮的。之后的段落中會使用“主選擇符”這個說法。主選擇符是指選擇符最右邊的部分(最終要匹配的那個元素,而不是它的祖先元素)。例如,在以下規則中:

a img, div > p, h1 + [title] {}

主選擇符是 “img”, “p”, 和 “[title]“。

ID 規則

ID 選擇符作為主選擇符的規則。

例如:

  • button#backButton { } /* ID 類別的規則 */
  • #urlBar[type="autocomplete"] { } /* ID 類別的規則 */
  • treeitem > treerow > treecell#myCell:active { } /* ID 類別的規則 */

Class 規則

如果一條規則有一個指定的 class 作為主選擇符,就被歸入此類。

例如:

  • button.toolbarButton { } /* 基于 class 的規則 */
  • .fancyText { } /* 基于 class 的規則 */
  • menuitem > .menu-left[checked="true"] { } /* 基于 class 的規則 */

Tag 規則

如果主選擇符不是 ID 或者 class,那么下一個類很可能就是 tag 分類。如果一條規則指定 tag 為主選擇符,就被歸入此類。

例如:

  • td { } /* 基于 tag 的規則 */
  • treeitem > treerow { } /* 基于 tag 的規則 */
  • input[type="checkbox"] { } /* 基于 tag 的規則 */

全局規則

除以上分類之外都歸入此類。

例如:

  • [hidden="true"] { } /* 全局規則 */
  • *{} /* 全局規則 */
  • tree > [collapsed="true"] { } /* 全局規則 */

樣式系統如何匹配規則

樣式系統從最右邊的選擇符開始向左側移動來匹配一條規則。樣式系統會一直向左匹配選擇符直到規則匹配完畢或者由于出錯停止匹配。

對于規則分類的第一步發生在主選擇符類別基礎上。這個分類的目的是把那些不需要浪費時間匹配的規則過濾出來。這是顯著提升性能的重點。對于一個給定的需要匹配的元素,規則越少,樣式的渲染越快。例如,元素有一個 ID,那么只有和元素 ID 匹配的 ID 規則會被檢索。只有和元素的 class 匹配的 class 規則會被檢索。只有和 tag 匹配的 tag 規則會被檢索。全局規則總是會被檢索。

上一篇:IE9:為什么 Acid3 無足輕重

下一篇:利用路徑及圖層樣式制作飛濺的牛奶

關于本站  |  版權聲明 | 合作聯系 | 網站地圖 | 幫助中心 |  | XHTML/CSS
Copyright © 2004-2010 downcodes.com 程序支持:木翼 冀ICP備05003145號
本站誠招服務器贊助商
贵州11选5漏选情况 股票趋势软件下载 10万做什么理财收益大 陕西快乐10分软件 福彩3d预测 体彩排列三预测汇总今 北京pc28在线预测 福建十一选五开奖记录 分析股市大盘 中国期货配资公司 甘肃省11选5开奖查询