chromium 最近實現了乙個html5的新特性：範圍樣式，又叫做
a div! a span!
a div! a span!
它設定的樣式規則將使得所有的變為紅色，變成綠色：
a div! a span!
a div! a span!
a div! a span!
然而，如果我們為
a div! a span!
a div! a span!
那麼這個樣式規則限制使得它們應用於元素的父元素及其內部的所有元素上。我們稱之為「範圍」，結果如下所示：
a div! a span!
a div! a span!
a div! a span!
用途
它有什麼好處？
一種常見的用途是內容合併：當你作為乙個**的作者想嵌入來自第三方的內容（譯者注：想想部落格），包括它所有的樣式風格，但是不想讓這些樣式「汙染」頁面其他無關的部分。其乙個巨大的優勢是可以將其他**例如yelp、twitter、ebay等的內容合併到乙個單獨頁面，而無需使用或者動態的編輯外部內容來隔離它們。
如果你使用內容管理系統（cms），它會傳送許多標記片段來整合成為乙個最終顯示的頁面。所以範圍樣式是乙個偉大的功能，可以確保每乙個片段與任何其他頁面上的樣式相隔離。這對wiki來說也一樣的有用。
當你想在頁面上展示一些漂亮的演示**，很容易限制樣式只作用於演示內容。你可以在演示隨意的新增樣式，而不用擔心對頁面上其他內容的影響。
它的另乙個用途是簡單的封裝：例如，如果你的網頁有乙個側邊選單，把指向選單的樣式封裝到其中的段落會很有意義。這些樣式規則對頁面其他區域的渲染將不會有任何影響，這可以使得它可以很好地和主要內容進行分離！
它可能最引人注目的用途之一是用在web元件模型上。web元件將是乙個構建像滑塊、選單、日期選擇器和選項卡部件等的偉大方式。通過提供範圍內的樣式，設計人員可以構建乙個元件並且將其打包成為乙個獨立的單位，其他人可以使用這個元件並組合為乙個富web應用程式。 我們計畫在web元件和shadowdom（已經可以在chrome://flags裡開啟實驗性的「shadow dom」標誌來啟用）裡大量使用範圍樣式。除了例如內聯樣式這樣不好的方式，現在沒有真正的好辦法來確保樣式限制在web元件裡，所以範圍樣式是乙個完美的解決方案。
為什麼包括父元素？
最自然的方式需要包括父元素，以便於規則可以來做為整個區域設定通用背景顏色這樣類似的事情。它還允許採用「防守性」的方式來書寫範圍樣式，通過為id或者類選擇器加上字首的方式為還不支援的瀏覽器提供優雅降級。
#menu .main
#menu .sub
…
這種模仿可以實現「範圍樣式」的效果，但是因為更複雜的選擇器會有一些執行時的效能損失。這種做法的好處是，它採用乙個優雅的降級方法讓我們可以等到被廣泛支援和id選擇器可以簡單地被丟棄時。
狀態
目前沒有已知bug，但是@keyframes和@-webkit-region區域範圍的版本還正在實現中。此外，@font-face被忽略掉了，因為現在有乙個很好的機會來調整這個規範。
我們鼓勵每個對這個特**興趣的人都來嘗試一下，讓我們知道你的反饋：好、不好以及（可能）不足。
HTML5的新特性
html的新特性 html5是下一代html標準 強化了web的表現性 支援網頁多 提供canvas畫布 2d圖形 三維 圖形及特效 支援語義化標籤 header footer 新的表單標籤 增加離線本地儲存 地理定位 應用快取 快取 將經常需要訪問的資料，放在記憶體中或者本地磁碟裡 canvas ...
HTML5的新特性
我是頭部 導航標籤 內容標籤 定義文件某個區域 側邊欄標籤 尾部標籤音訊標籤type email 限制使用者輸入必須為email型別 type url 限制使用者輸入必須為url型別 type date 限制使用者輸入必須為日期型別 type time 限制使用者輸入為時間型別 type month...
html5 標籤新特性
html5主要的特徵就是標籤語義化。語義化的好處就是使得 結構讓人清晰易讀，這些語義化的標籤會有一些自帶屬性，比如說邊距 顏色 和display的設定等等 頭部 內容 內容分塊1 內容分塊2 內容分塊3 底部 導航 側欄 引用 自帶邊距，和縮排 標記 保留書寫的樣式 包括空格 tab 還有 ente...