您現在的位置是:電腦技術吧?>? 故障問題 ??>??樣式優先級,行內樣式優先級??>??正文詳情

樣式優先級,行內樣式優先級

集元綠2019-11-07 12:12:11 人圍觀
簡介表樣式優先級按順序為首先,什么是CSS優先級所謂CSS優先級是指在瀏覽器中解析CSS樣式的順序當多個CSS選擇器選擇同一個元素(或內容)時,應該根據優先級選擇不同的CSS規則為什么內

一、什么是CSS優先級?  所謂CSS優先級,即是指CSS樣式在瀏覽器中被解析的先后順序。

當同一個元素(或內容)被多個CSS選擇符選中時,就要按照優先權取舍不同的CSS規則。

  二、為什么要研究CSS優先級?CSS優先級與門戶系統有什么關系?  研究CSS優先級的主要目的就是解決多個CSS選擇符選中同一個元素時的沖突問題。

在門戶系統中,為了保證所有的頁面能正常展示,幾乎所有的微件及頁面都有基礎CSS樣式,但是門戶系統是開放的、個性化的平臺,大部分樣式都給予了用戶修改權,這時自定義樣式和門戶基本樣式就有可能產生沖突,合理使用CSS優先級可以完美的解決這些沖突。

  三、CSS優先級規則  ◎ 每個ID選擇符(#someid),加 0,1,0,0。

  ◎ 每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=]等)、每個偽類(形如:hover等)加0,0,1,0  ◎ 每個元素或偽元素(:firstchild)等,加0,0,0,1  ◎ 其他選擇符包括全局選擇符*,加0,0,0,0。

相當于沒加,不過這也是一種specificity,后面會解釋。

  按這些規則將數字串逐位相加,就得到最終計算得的specificity,然后在比較取舍時按照從左到右的順序逐位比較。

  這樣的說明或許過于復雜,具體示例如下,當兩種選擇符選中同一個元素時,優先級規則如下:  h1 {color: red;}  /* 只有一個普通元素加成,結果是 0,0,0,1 */  body h1 {color: green;}  /* 兩個普通元素加成,結果是 0,0,0,2 */  后者勝出  h2.grape {color: purple;}  /* 一個普通元素、一個class選擇符加成,結果是 0,0,1,1*/  h2 {color: silver;}  /*一個普通元素,結果是 0,0,0,1 */  前者勝出  html body table tr[id=totals] td ul li {color: maroon;}  /* 7個普通元素、一個屬性選擇符、兩個其他選擇符,結果是0,0,1,7 */  li#answer {color: navy;}  /* 一個ID選擇符,一個普通選擇符,結果是0,1,0,1 */  后者勝出  從這里可以總結一個整體的規則即 idclass普通元素 , 同類選擇符條件下層級越多的優先級越高。

  除了上面的specificity還有一些其他規則  ◎ 文內的樣式優先級為1,0,0,0,所以始終高于外部定義。

這里文內樣式指形如  blah  的樣式,而外部定義指經由或

版權聲明:本文由 集元綠 整理編輯。

原標題:樣式表優先級,標題優先級

轉載注明出處:http://www.dn9ww09s.icu/fault/11412.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 手機變電腦模擬器,電腦游戲手機玩模擬器

    手機變電腦模擬器,電腦游戲手機玩模擬器 相關圖片手機windows模擬器Android仿真器電腦版是在PC平臺上模擬Android手機系統,模擬Android手機運行環境,讓用戶在電腦上體驗Android游戲和應用的仿真器軟件哪個A電腦游戲模擬器...

  • overflow,stackoverflow

    overflow,stackoverflow 相關圖片div overflow溢出有問題嗎沒問題那我們為什么要小心使用呢因為有時會導致一些溢出的問題:Auto,很多人貪圖它方便的書寫,直接用來清除浮點數但是Firefox使用overflooverflow都有哪些值...

  • 筆記本電腦鍵盤錯亂,筆記本電腦鍵盤失靈錯亂

    筆記本電腦鍵盤錯亂,筆記本電腦鍵盤失靈錯亂 相關圖片為什么電腦鍵盤錯亂許多游戲玩家,特別是喜歡玩筆記本電腦游戲的大學生,在連接外部鍵盤后發現筆記本電腦的鍵盤按鍵紊亂另外還有一些情況會導致筆記本鍵盤按鍵紊亂,那么如何...

  • 圓角矩形,如何調整圓角矩形

    圓角矩形,如何調整圓角矩形 相關圖片ai怎么調整矩形的圓角所謂的高級CSS技能實際上是一些基本技能的創造性組合任何手段和技能都是解決問題的方法只要你學會了這種思維方式,你也可以有自己的CSS腳本CSS2無法創建曲線...

  • 筆記本組裝配置清單,臺式機組裝清單

    筆記本組裝配置清單,臺式機組裝清單 相關圖片電腦主機組裝隨著時代的發展,計算機已成為人們生活的必需品筆記本電腦以其輕巧方便贏得了許多年輕人的青睞不過,對于很多只在家里使用或喜歡游戲的朋友來說,臺式電腦是更好...

  • 網頁優化包括什么,網站怎么優化

    網頁優化包括什么,網站怎么優化 相關圖片如何提高性功第一期回顧:《有圖有案例!125個提升網頁可用性的優化小技巧(一)》  讓常用功能和重要數據信息更接近用戶  預測用戶的意圖,讓他們盡可能接近目標。  △ 篩選...

  • 機械硬盤和固態硬盤的區別,固態硬盤和機械硬盤哪個好

    機械硬盤和固態硬盤的區別,固態硬盤和機械硬盤哪個好 相關圖片ssd硬盤隨著科學技術的發展,固態硬盤(SSD)應運而生ssd分發已經有很長一段時間了不過,目前主流的安裝方式仍然是選擇傳統的機械硬盤,而大部分的固態硬盤都采用高端配置安ssd固...

  • 電腦開機顯示器黑屏,開機顯示器沒反應

    電腦開機顯示器黑屏,開機顯示器沒反應 相關圖片顯示器亮一下就黑屏當電腦開機時,顯示器的黑屏通常是硬件問題很多用戶都想檢查并解決這個問題打開電腦后,小編將分享顯示屏黑屏的解決方案如果你需要知道,你可以看看顯示器...

  • background_,background是什么

    background_,background是什么 相關圖片html中background下面是我想使用的背景圖:代碼如下:在HTML頁面中,有162*162個灰色背景div塊和三種不同位置的背景圖片在瀏覽器中看到的效果可以從上圖中看到:當它是背景位background設置...

  • 怎么把照片傳到電腦上,手機照片怎樣傳到電腦上

    怎么把照片傳到電腦上,手機照片怎樣傳到電腦上 相關圖片手機照片直接傳到u盤里在我們的日常生活中,手機中的照片越來越多,不僅占據了手機的存儲空間,而且影響了手機的運行速度因此,經常有必要將手機拍攝的照片轉移到電腦上,以節...

熱評文章

  • 筆記本電腦組裝教程,組裝電腦教程

    筆記本電腦組裝教程,組裝電腦教程 相關圖片組裝電腦入門教程我們都知道,買臺式組裝機,首先要買各種電腦配件,然后自己慢慢組裝然而,對于那些想自己組裝電腦或是第一次組裝的朋友,我們必須知道一些預防措施那么如何...

  • 希捷西數移動硬盤,西數移動硬盤

    希捷西數移動硬盤,西數移動硬盤 相關圖片希捷西數東芝移動硬盤十年之前的磁盤市場,希捷是當之無愧之牛耳,而西部數據則是苦苦的追趕者;十年之后,存儲市場發生了翻天覆地的變化,而希捷和西部數據的角色也在這十年...

  • 與和活的優先級,優先級

    與和活的優先級,優先級 相關圖片c 優先級網站和應用程序中的對話框通常描述信息并提供幾個選項最常見的選項數通常是一個具有最高優先級的選項,這是首選選項,而另一個選擇較少,這是次要選項(例如,用戶填...

  • 空當接龍怎么玩,紙牌接龍怎么玩

    空當接龍怎么玩,紙牌接龍怎么玩 相關圖片網上紅心大戰玩法紅心大戰類似于公主制的游戲我們的目標是扔掉手中的牌,避免得分,并且在比賽結束時盡量得到最低的分數紅心大戰是由四名隊員一起進行的,用一對沒有大小王的...

  • 文件夾刪除又自動生成,文件夾刪除了又生成一個

    文件夾刪除又自動生成,文件夾刪除了又生成一個 相關圖片文件夾刪除了以后當Dreamweaver用作項目時,網站下的每個文件夾都會自動生成一個“notes”文件夾,刪除后會立即再次生成在最近的項目中,一些童鞋意外地將所有“notes為什么刪除的文...

  • office2007激活工具,office2010激活工具

    office2007激活工具,office2010激活工具 相關圖片office2007怎么看激活Microsoft Office 2007是Microsoft最新的Office系列軟件它不僅優化了系統的功能,而且增強了系統的安全性和穩定性界面也給人一種愉悅office2007工具...

  • 酷睿i3處理器怎么樣,酷睿i3

    酷睿i3處理器怎么樣,酷睿i3 相關圖片酷睿i3和i5的區別隨著計算機科學技術的發展,許多品牌的主流處理器已經占據了市場的上風例如,核心I3是一個優秀的處理器它有一個緩存和一個運算單元核心I3呢我有興趣看一下小編的...

  • 筆記本開不了機,筆記本電腦關不了機怎么解決

    筆記本開不了機,筆記本電腦關不了機怎么解決 相關圖片筆記本突然開不了機筆記本電腦已經是每個家庭的必需品了在長期使用過程中不可避免地會出現一些問題如果我們的筆記本不能打開,我們該怎么辦我們不能盲目地對付他們首先,我們...

  • appscan常見解決方案,生活中常見的問題與解決方案

    appscan常見解決方案,生活中常見的問題與解決方案 相關圖片生活問題以及解決方案大多數網站都會隨著內容的增加、需求的變化和產品的演進而重新設計然而,網站的重新設計不可避免地會遇到各種各樣的問題、誤解和困難。大部分現場重新設...

  • 電腦cpu使用率0很卡,電腦cpu使用率

    電腦cpu使用率0很卡,電腦cpu使用率 相關圖片筆記本電腦cpu使用率高當你使用計算機時,你經常遇到一個突然變得很慢的系統這時,大多數人可以通過任務管理器直接檢查CPU的利用率,然后就會發現CPU的占用率非常高,甚至高達1...

關注微信

变脸官网查询