您現在的位置是:電腦技術吧?>? 編程技術 ??>??css優先級,css的優先級順序??>??正文詳情

css優先級,css的優先級順序

趙樂人2019-11-15 10:20:47 人圍觀
簡介css優先級的意義是什么概念瀏覽器通過判斷優先級來確定哪些屬性值與元素最相關,以便將它們應用于元素。優先級由選擇器的匹配規則決定。如何計算?優先級是根據每個選擇器類型

概念瀏覽器是通過判斷優先級,來決定到底哪些屬性值是與元素最相關的,從而應用到該元素上。

優先級是由選擇器組成的匹配規則決定的。

如何計算?優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對應相應匹配表達式的權重值.如果優先級相同,元素最終會應用 CSS 中靠后的聲明.注意: 在文檔樹中的距離是不會對元素優先級計算產生影響的.(可以看文檔中無視DOM樹中的距離的例子)優先級順序下列是一份優先級逐級增加的選擇器列表:通用選擇器*元素(類型)選擇器類選擇器屬性選擇器偽類ID 選擇器內聯樣式事實上,元素還可以從父元素上繼承一些樣式,如color等屬性。

這些繼承的樣式的優先級永遠低于元素本身的樣式,包括通用選擇器:代碼如下:div id='test'a href=#text/a/div/p p * {color:red;}#test{color:blue; }最終text的顏色是紅色的。

!important 規則是例外當!important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪個位置. 盡管如此, !important規則還是與優先級毫無關系使用!important不是一個好習慣,因為它改變了你樣式表本來的級聯規則,從而難以調試。

一些不成文規則不要在全站范圍的css中使用!important.只在需要覆蓋全站范圍的css或是外部css(例如引用的ExtJs或是YUI)的時候才在指定的頁面上使用 !important。

不要在你的插件中使用!important。

永遠都要優先考慮使用樣式規則的優先級來解決問題而不是 !important。

取而代之,你可以:更好的利用CSS的級聯屬性更多的使用適合的選擇器。

比如在你需要選定的對象元素前加上更多的元素,使選擇的范圍縮小,你的選擇器就變得更有針對性,從而提高優先級:代碼如下:div id=testspanText/span/divdiv#test span { color: green }span { color: red }div span { color: blue }無論你css語句的順序是什么樣的,文本都會是綠色的(green)因為這一條規則是最有特殊性、優先級最高的。

(同理,無論語句順序怎樣,藍色(blue)的規則都會覆蓋紅色(red)的規則)什么時候應該使用:A) 一種情況你的網站上有一個設定了全站樣式的CSS文件,同時你(或是你同事)寫了一些效果通常都是很差的行內樣式(行內樣式的優先級是最高的)。

在這種情況下,你就可以在你全局的CSS文件中寫一些!important的樣式來覆蓋掉那些直接寫在元素上的行內樣式。

活生生的例子比如:有人在jQuery插件里寫了糟糕的行內樣式。

B) 另一種情況代碼如下:#someElement p {color: blue;}p.awesome {color: red;}在外層有 #someElement 的情況下,你怎樣能使 awesome 的段落變成紅色呢?

這種情況下,如果不使用!important,第一條規則永遠比第二條的優先級更高。

怎樣覆蓋掉 !important很簡單,你只需要再加一條 !important 的CSS語句,將其應用到更高優先級的選擇器(在原有基礎上添加額外的標簽、class或id選擇器)上;或是保持選擇器一樣,但添加的位置需要在原有聲明的后面(優先級相同的情況下,后邊定義的會覆蓋前邊定義的)。

代碼如下:diva href=# id=testtext/a/div想要把原有的綠色文本變成紅色,提升優先級的方式:代碼如下:#test.a{color: red !important;!--盡管這條聲明在前,但是仍會覆蓋下邊的樣式--}a{color: green !important;}不過代碼如下:a{color: green !important;}a{color: red !important;!--同樣的選擇器,后邊的聲明會覆蓋前邊的--}

版權聲明:本文由 趙樂人 整理編輯。

原標題:關于css樣式表的優先級,html中css優先級

轉載注明出處:http://www.dn9ww09s.icu/program/12465.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 如何用ibooks,ibooks怎么用不了

    如何用ibooks,ibooks怎么用不了 相關圖片蘋果6的ibooks怎么用iPhone上的IBooks是一種閱讀工具。IPhone用戶可以直接在iBooks上購買和閱讀書籍。iBooks的使用并不復雜。如果你不知道如何使用iBooksridibooks軟件怎么用...

  • ui設計師和交互設計師,交互設計師和ui設計師的區別

    ui設計師和交互設計師,交互設計師和ui設計師的區別 相關圖片ui設計和交互設計哪個好2016年,視覺 互動設計師的就業價值將更高。盡管大多數視覺設計師還沒有接受過正式的基本交互訓練,但不用擔心。今天這篇扣人心弦的雜志文章的@虹膜翻譯分...

  • 證件照編輯,photoshop cc

    證件照編輯,photoshop cc 相關圖片ps導出為png快捷鍵有網友在網上尋找Photoshop CS4的序列號,想激活它。Photoshop CS4軟件具有更直觀的用戶體驗、更大的編輯自由度和大大提高的工作效率photoshop序列號 破解...

  • css搜索框居中,搜索框css

    css搜索框居中,搜索框css 相關圖片css搜索框樣式代碼最終渲染:首先設置一個帶有背景色的公共div框,然后使用上一篇文章中從post獲得的三角形圖標,將div框設置為相對定位模式,將三角形圖標設置為絕對定位,并將位...

  • superamoled屏幕好嗎,ltps和amoled哪個好

    superamoled屏幕好嗎,ltps和amoled哪個好 相關圖片super amoled 手機市場上的一些安卓手機提到,他們在宣傳手機屏幕時使用了超級AMOLED屏幕。超級AMOLED和之前的AMOLED屏幕之間哪一個最好?兩者有什么區別?AMOLED(super amoled屏幕...

  • 高通驍龍625怎么樣,驍龍625處理器怎么樣

    高通驍龍625怎么樣,驍龍625處理器怎么樣 相關圖片驍龍660一些入門級手機使用小龍450,這個CPU呢?小龍450是小龍發布的中低端移動SOC,但事實上,沒有一款中端機型會選擇小龍450。450多臺小龍用于小龍450采用驍龍660怎么樣...

  • 交互設計作品集輔導,交互設計作品

    交互設計作品集輔導,交互設計作品 相關圖片北京交互設計作品集培訓斯佩爾(中國設計總監):我想我首先需要了解的是,為什么我們需要一個投資組合來尋找互動設計或其他設計工作。從我采訪各個設計師的經驗來看,作品集...

  • bios硬盤啟動順序,bios設置硬盤啟動

    bios硬盤啟動順序,bios設置硬盤啟動 相關圖片bios設置ssd第一啟動盤許多計算機用戶不知道,當計算機啟動時,他們會從硬盤中尋找啟動文件來啟動系統。如果硬盤不是第一個引導項目,或者有兩個硬盤,系統將無法啟動。有時,有...

  • 居中顯示,div居中顯示

    居中顯示,div居中顯示 相關圖片設置表格居中代碼如下:div style=width:1000px;margin:0auto;div style=background color:red;text ali頁碼居中怎么設置...

  • 苯磺酸氨氯地平片價格,湖南天雁股吧

    苯磺酸氨氯地平片價格,湖南天雁股吧 相關圖片ST信威在手機撥號界面輸入具體指令,查詢相應的手機信息。有些用戶不知道**Chen 06的用途,所以本文將與您分享**chen06找到的信息是什么?每個手機都有一個世界000760斯太爾股吧...

熱評文章

  • ibooks,ibooks author

    ibooks,ibooks author 相關圖片ibooks軟件下載IBooks author是蘋果公司2012年發布的一款電子書制作工具。用戶可以免費下載和使用。iBooks作者制作的電子書可以在iBooks上下載并在iPadibookstart...

  • 界面配色,的配色

    界面配色,的配色 相關圖片調色配色如何快速選擇或匹配顏色?今天@MICU設計并介紹了界面中最常用的三種方法,它們簡單實用,有大量優秀的例子,特別適合新手色彩初學者。快到元旦了。每個人手頭都有很多配...

  • 蘋果6s激活出錯怎么解決,蘋果6s激活出錯

    蘋果6s激活出錯怎么解決,蘋果6s激活出錯 相關圖片蘋果6s手機激活出錯iPhone到達后,需要激活iPhone才能正常使用,但部分用戶遇到iPhone激活錯誤的情況。如果Apple激活出錯,我該怎么辦?不久前,用戶在激活蘋果時遇到蘋果破解激活...

  • 什么是超級用戶,超級用戶

    什么是超級用戶,超級用戶 相關圖片如何變成超級用戶我認為您對regedit.exe很熟悉,但無法設置注冊表項的權限。regedt32.exe的最大優點是可以設置注冊表項的權限。NT/2000/XP的帳戶信息是以超級用戶密碼...

  • 簡潔網名,簡潔的意思

    簡潔網名,簡潔的意思 相關圖片簡潔壁紙我們在頁面右側看到了很多浮動效果。第一類是QQ聯系人面板、對聯廣告等,大部分是基于JavaScript的動態效果。今天,我想在右邊分享一個浮動效果,它只需要CS情侶網名二字簡...

  • 聯想xp系統,聯想電腦是xp系統嗎

    聯想xp系統,聯想電腦是xp系統嗎 相關圖片聯想筆記本電腦怎么裝xp系統使用聯想XP SP2系統生產的windowsxpsp3oem系統磁盤,可以在網上找到很多聯想磁盤,但都不是聯想SP2 OEM生產的。根據論壇上的教學方法,我們可聯想電腦怎么做...

  • 什么是混合模式,混合模式在哪

    什么是混合模式,混合模式在哪 相關圖片ps混合模式濾色創造力無處不在。在網頁設計中,如果你發現了一些好的靈感或趨勢,盡量把它應用到你的項目中去,少用那些無聊和腐朽的想法。畢竟,設計師應該提高自己,不要為了...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載Windows XP SP3已經正式發布。如果您還沒有下載XP SP3,請在Zixun/200805/3371.html下載XP SP3。IE7不包含在升級包中XP免費升級win10...

  • 高峰效能,高峰效能容量是什么

    高峰效能,高峰效能容量是什么 相關圖片Windows XP我們一直對beta軟件的評估持保留態度,但這條消息確實讓人難以接受。根據魔鬼山軟件的測試結果,盡管微軟說Windows XP SP3只是為了增強和修正安全性Windows XP Mode...

  • 彈出菜單,編程大師

    彈出菜單,編程大師 相關圖片安卓彈出菜單!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/鼠標左鍵彈出菜單...

關注微信

变脸官网查询