您現在的位置是:電腦技術吧?>? 基礎知識 ??>??antd樣式覆蓋,iview樣式覆蓋??>??正文詳情

antd樣式覆蓋,iview樣式覆蓋

貫瑪麗2019-11-15 19:20:38 人圍觀
簡介怎么看css樣式被什么覆蓋了級聯優先級為:瀏覽器默認外部樣式表內部樣式表內聯樣式,其中樣式表還具有:類選擇器類派生選擇器ID選擇器ID派生選擇器派生選擇器以前稱為上下文選擇

層疊優先級是:  瀏覽器缺省 外部樣式表 內部樣式表 內聯樣式  其中樣式表又有:  類選擇器 類派生選擇器 ID選擇器 ID派生選擇器  派生選擇器以前叫上下文選擇器,所以完整的層疊優先級是:  瀏覽器缺省 外部樣式表 外部樣式表類選擇器 外部樣式表類派生選擇器 外部樣式表ID選擇器 外部樣式表ID派生選擇器 內部樣式表 內部樣式表類選擇器 內部樣式表類派生選擇器 內部樣式表ID選擇器 內部樣式表ID派生選擇器 內聯樣式...共12個優先級  有時候在寫CSS的過程中,某些限制總是不起作用,這就涉及了CSS樣式覆蓋的問題,如下 代碼如下 #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; }   查找一些教材中(w3schools等),只說css的順序是元素上的style 文件頭上的style元素 外部樣式文件,但對于樣式文件中的多個相同樣式的優先級怎樣排列,沒有詳細說明。

經過測試和繼續搜索,得知優先級如下排列:  1. 樣式表的元素選擇器選擇越精確,則其中的樣式優先級越高。

  id選擇器指定的樣式 類選擇器指定的樣式 元素類型選擇器指定的樣式  所以上例中,#navigator的樣式優先級大于.current_block的優先級,即使.current_block是最新添加的,也不起作用。

  2. 對于相同類型選擇器指定的樣式,在樣式表文件中,越靠后的優先級越高。

  注意,這里是樣式表文件中越靠后的優先級越高,而不是在元素class出現的順序。

比如.class2 在樣式表中出現在.class1之后: 代碼如下 .class1 { color: black; } .class2 { color: red; }   而某個元素指定class時采用 class=class2 class1這種方式指定,此時雖然class1在元素中指定時排在class2的后面,但因為在樣式表文件中class1處于class2前面,此時仍然是class2的優先級更高,color的屬性為red,而非black。

  3. 如果要讓某個樣式的優先級變高,可以使用!important來指定。

代碼如下 .class1 { color: black !important; } .class2 { color: red; }   解決方案:  此時class將使用black,而非red。

  對于一開始遇到的問題,有兩種解決方案:  1. 將border從#navigator中拿出來,放到一個class .block中,而.block放到.current_block之前: 代碼如下 #navigator { height: 100%; width: 200; position: absolute; left: 0; } .block { border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; }   需要默認為#navigator元素指定class=block  2. 使用!important: 代碼如下 #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0 !important; }   此時無需作任何其他改動即可生效。

可見第二種方案更簡單一些。

  補充一個例子 代碼如下 html head title/title style type=text/css div { color: #00FF00 } /* 綠色 */ .a1 { color: #0000FF } /* 藍色 */ .a1 div { color: #00FFFF } /* 青色 */ .a2 { color: #FF0000 } /* 紅色 */ #a2 { color: #FFFF00 } /* 黃色 */ #a2 div { color: #FF00FF } /* 紫色 */ /style /head body div我是綠色,內部樣式表優先于瀏覽器缺省/div div class=a2我是紅色,類選擇器優先于內部樣式表/div div class=a2 id=a2我是黃色,ID選擇器優先于類選擇器/div div class=a1 span我是藍色,類選擇器優先于內部樣式表/span div我是青色,類派生選擇器優先于類選擇器/div div class=a2我還是青色,類派生選擇器優先于所有類選擇器/div div id=a2 span我是黃色,ID選擇器優先于類派生選擇器/span div我是紫色,ID派生選擇器優先于類派生選擇器/div div class=a1我還是紫色,ID派生選擇器優先于所有類選擇器/div div class=a1 id=a1我還是紫色,ID派生選擇器優先于所有ID選擇器/div div class=a1 id=a1 style=color:#000000;我是黑色,內聯樣式駕到閑雜人等退下/div /div /div /body /html   效果

  另外,如果同一個元素在沒有其他樣式的作用影響下,其Class定義了多個并以空格分開,其優先級順序為:  一個元素同時應用多個class,后定義的優先(即近者優先),加上!important者最優先! 代碼如下 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title/title style type=text/css .a2 { font-size: 18pt; color: #0000FF!important; } .a1 { font-size: 9pt; color: #FF0000; } /style /head body br / span class=a1a1/spanbr / span class=a2a2/spanbr / span class=a2 a1a2 a1/spanbr / span class=a1 a2a1 a2/spanbr / /body /html   運行后的效果圖:

版權聲明:本文由 貫瑪麗 整理編輯。

原標題:標簽覆蓋,樣式覆蓋

轉載注明出處:http://www.dn9ww09s.icu/basics/12591.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • c盤里面哪些文件可以刪除,c盤哪些內容是可以刪除的

    c盤里面哪些文件可以刪除,c盤哪些內容是可以刪除的 相關圖片系統盤里哪些可以刪除磁盤上有很多系統密鑰文件,安裝的每一個軟件都會在C盤中生成一些密鑰文件,這也導致C盤的容量越來越小,這對于原本分區C盤太小的用戶來說有點尷尬。當然...

  • 不能雙擊選中,雙擊選中

    不能雙擊選中,雙擊選中 相關圖片CAD怎么雙擊取消選擇FF的樣式:-Moz user select:none;對于FF以外的瀏覽器:onselectstart=returnfalse(直接添加到所需標簽中)例如:d雙擊PS是什么意思...

  • 無法正常啟動0xc0000022,0x00000022

    無法正常啟動0xc0000022,0x00000022 相關圖片win10 0xc0000022有時當用戶打開計算機上的某個軟件時,會出現一條錯誤消息,說明應用程序無法正常啟動0xc0000022。在這種情況下我們該怎么辦?讓我們看看應用程序如何無法正常啟0xc00...

  • 全方位了解,全方位

    全方位了解,全方位 相關圖片如何全方位了解公司這是一個adobe建議:CSS區域,它提供了一種在多個不同元素中排列內容的方法首先,需要為內容容器的flow屬性聲明一個唯一的字符值,然后使用from()函數和全方面...

  • windows 找不到文件,windows找不到文件msdt

    windows 找不到文件,windows找不到文件msdt 相關圖片windowsWindows找不到本文中提到的文件。請確保文件名正確,然后重試。當用戶搜索元素文件時,情況并非如此,但當用戶移動文件時,會彈出提示。有些用戶不知道當計算機處于windows資...

  • steam錯誤代碼-100解決,steam錯誤代碼-21解決

    steam錯誤代碼-100解決,steam錯誤代碼-21解決 相關圖片steam錯誤代碼137吃雞游戲《絕地生存》讓更多玩家開始接觸steam平臺,用戶群也更多。當然,在使用蒸汽的過程中會出現更多的錯誤情況。不過,還是有一些人不熟悉蒸汽,所以遇到蒸汽...

  • 語法規則,什么是語法

    語法規則,什么是語法 相關圖片基礎語法一。HTML5不區分大小寫。這是我的2號。HTML5省略斜線來關閉空元素。空元素是不嵌套內容的元素,例如:3。屬性的語法規則。只要屬性值不包含限定字符(如(=或語法的組合規...

  • arcore支持的手機,什么手機支持carplay

    arcore支持的手機,什么手機支持carplay 相關圖片華為手機里的arcore是什么有網友在應用市場發現了一個阿科爾應用。阿科爾是什么?Arcore是谷歌為構建增強現實應用而推出的一個軟件平臺,蘋果平臺也有類似的arkit。arcore的主要功什么...

  • html5,html

    html5,html 相關圖片html解析原理HTML5和CSS3的時代即將到來。2011年淘寶新主頁全部使用了HTML5。擁抱變革是王道。我有很好的翻譯。讀完后,我覺得我明白了很多。我強烈推薦其他的童鞋,html5上傳原理...

  • hp筆記本如何進bios,惠普電腦進bios

    hp筆記本如何進bios,惠普電腦進bios 相關圖片hp工作站進bios有時,由于一些設置問題,筆記本電腦需要進入BIOS進行設置。我相信許多惠普筆記本用戶不知道如何進入BIOS。惠普筆記本電腦進入BIOS的方式非常簡單:1。筆記本hp進bios按...

熱評文章

  • outlook無法創建簽名,outlook為什么無法設置簽名

    outlook無法創建簽名,outlook為什么無法設置簽名 相關圖片網頁版outlook怎么設定簽名對于電子郵件,現在我們都使用QQ電子郵件或網易電子郵件。事實上,有很多人,特別是外國客戶,更習慣于使用Microsoft Outlook來管理電子郵件。Outloutlook網頁版...

  • css單選,css單選框

    css單選,css單選框 相關圖片css選擇器有哪些代碼如下:div style=width:62%;margin:Auto;div style=float:left;width:49%;text align:ccss單選按鈕樣式...

  • 無法啟動apple mobile,apple mobile啟動失敗

    無法啟動apple mobile,apple mobile啟動失敗 相關圖片apple device當iPhone用戶將iPhone連接到計算機時,會出現蘋果移動設備無法啟動、iPhone無法連接到計算機的情況。我怎樣才能解決這個問題服務apple 啟動失敗...

  • 3dtouch功能是什么,iphone3d touch是什么

    3dtouch功能是什么,iphone3d touch是什么 相關圖片3d touch有什么用3D touch是首次在iPhone 6S上推出的一種三維觸摸技術,屏幕可以感知不同壓力感應力的觸摸,會彈出一個半透明的菜單,菜單中包含了應用程序下的一些快捷操3d touch...

  • 框架模板,網站框架模板

    框架模板,網站框架模板 相關圖片PPT模板網頁設計通常需要事先考慮很多因素,而用戶給你的時間非常有限。如何提高效率其實是一個比較煩人的問題。一種可行的方法是使用準備好的框架和模板。HTML5框架、模板和前端...

  • 三星可折疊手機,三星可折疊手機圖片

    三星可折疊手機,三星可折疊手機圖片 相關圖片三星的可折疊屏隨著全屏幕的出現,三星開始將手機進化的方向轉向折疊式屏幕。最近,三星的可折疊手機再次爆出新信息。三星的可折疊手機采用7.3英寸屏幕,可以像之前所說的左右...

  • css怎么做按鈕,css按鈕

    css怎么做按鈕,css按鈕 相關圖片css按鈕切換今天,我們將為所有網友帶來另一個CSS實現的鼠標通過按鈕的特殊效果。在按鈕的開頭,邊框是一個斷開的按鈕。當鼠標通過該按鈕時,動畫將變為閉合邊界。呈現如下:讓...

  • 開啟upnp,upnp開啟還是禁用

    開啟upnp,upnp開啟還是禁用 相關圖片upnp怎么使用UPnP是什么意思?UPnP(universal plug and play,通用即插即用)是全球范圍內各種智能設備、無線設備、個人計算機等實現對等網絡連接(Pupnp使用...

  • 如何創建apple id賬號,如何創建apple id

    如何創建apple id賬號,如何創建apple id 相關圖片蘋果id此時無法創建您的賬戶如果蘋果用戶想在蘋果設備上享受這些服務,他們首先必須有一個蘋果ID,包括iPhone。iPhone到達時需要激活,還需要使用用戶的apple ID。如何創建應用怎么重...

  • 垂直居中一個浮動元素,怎么使浮動的元素垂直居中

    垂直居中一個浮動元素,怎么使浮動的元素垂直居中 相關圖片浮動居中場景:在固定高度div中,有一個浮動元素,需要垂直居中。原始代碼如下:代碼如下:!Doctypehtmlhtmlheadtitle/titletyletype=div怎么垂直居中...

關注微信

变脸官网查询