您現在的位置是:電腦技術吧?>? 故障問題 ??>??cascade怎么用,cascade??>??正文詳情

cascade怎么用,cascade

那拉虹影2019-11-05 16:11:11 人圍觀
簡介cascade意思即使在不太復雜的樣式表中,也可能有兩個或多個規則可以找到相同的元素css通過一個名為cascade的過程來處理這個沖突。cascade為每個規則分配一個重要性索cascade是什么

即使在不太復雜的樣式表中,也可能會有兩個或者更多個規則找到同一元素。

CSS通過一個叫做層疊(cascade)的過程處理這種沖突。

層疊給每個規則分配一個重要程度指數。

作者定義的樣式具有最高的重要性指數,其次是用戶定義的樣式。

但是為了增強用戶的控制能力,用戶可以通過為任何規則增加一個!important來提高它的重要性指數,讓它的優先級高于任何規則,甚至是比作者的!important還要高。

  因此,層疊重要性指數的次序依次為:  標記為!important的用戶樣式  標記為!important的作者樣式  作者樣式  用戶樣式  瀏覽器/用戶代理的默認樣式  為了計算規則的優先級,每種類型的選擇符都有一個相應的數值,由于每個選擇器都由若干選擇符組成,所以選擇器的優先指數由選擇符對應的數值相加而成,數值越高,優先級越高。

CSS中的選擇符有四類:  行內樣式(Inline Style),如...  ID選擇符(ID selectors),如#myid  類、屬性選擇符、偽類(Classes, attributes and pseudo-classes),如 .class {...}、[href$=dudo.org]、:hover  元素(elements)、偽元素選擇符(pseudo-elements),如 p {...}、:first-line {...}  怎么來測量呢?如前所述,它們每一類都有不同的數值表示,其中:  行內樣式為:1000  ID選擇符為:0100  類選擇符為:0010  元素樣式為:0001  這里要指出的是,所有這些數值都不是10進制數字,1000只是代碼它是一個行內樣式,  例如,body #wrap p {...},那么它的優先級指數就是 1 100 1=102,而body div#wrap p {...}的優先級指數就是 1 1 100 1 =103。

  再看一下其它的例子:  * { } 0  li:first-line { } 2 (one element, one pseudo-element)  ul ol li { } 3 (three elements)  ul ol li.red { } 13 (one class, three elements)  style= 1000 (one inline styling)  div p { } 2 (two HTML selectors)  div p.sith { } 12 (two HTML selectors and a class selector)  body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1 100 10 1)  看這段代碼:  #wrap #content {color: blue;}  #content {color: red;}  this is a text here  最終文本會顯示什么樣的顏色呢?  是的,樣式覆蓋只會發生在具有相同優先級的情況下。

這個例子中#wrap #content為200,而#content為100,縱使后設定color:red,也不會覆蓋掉先前設定的color:blue;。

此外,你可以為#content {color: red;}增加!important來看看效果。

  以上都是在少于10個選擇符的情況下,可以把這些數值當作十進制來使用和比較,但是,當選擇符超過10個(雖然可能性很小)又會怎么樣呢?我們參考一個Eric的例子:  .hello {color: red;} /* specificity = 10 */  HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI {color: green;}  /* specificity = 15 */  這里的10并不是十,它僅僅代表是一個煩選擇符,所以的它的優先級依然要比 15個類型選擇符組成的選擇器要高。

如果換成十六進制的話,就是這個樣子  .hello {color: red;} /* specificity = 10 */  HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI {color: green;}  /* specificity = 15 */  但是問題,如果你再添加兩個元素,就又變成了11了,還是出現前面的情況。

不過你應該始終記得,即使數值看起來比較大,它們的排序首先按照類型優先級來決定。

注:更多精彩文章請關注電腦高手網頁設計教程欄目。

版權聲明:本文由 那拉虹影 整理編輯。

原標題:cascade英語翻譯,探針臺cascade

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

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • msi筆記本,msi筆記本怎么樣

    msi筆記本,msi筆記本怎么樣 相關圖片msi是什么電腦MSI筆記本電腦有幾個版本的Ge,GS,GT,GX系列,為玩家提供更多的購買選擇msi筆記本以其高性能的特點擠進了競爭激烈的電腦市場,并以其自身獨特的特點被大多rog筆記本...

  • 網頁設計背景,頁面背景

    網頁設計背景,頁面背景 相關圖片怎么設置頁面背景在網頁設計和制作中,經常會遇到這樣的問題:當使用圖片作為背景時,由于顯示分辨率太大或圖片尺寸太小,頁面兩側或底部都沒有背景圖片。例如,當分辨率小于...

  • word激活密鑰,word文檔激活密鑰

    word激活密鑰,word文檔激活密鑰 相關圖片office密鑰在哪里查找現在很多軟件確實需要激活,特別是一些辦公軟件,必須激活才能使用。但是只有兩種方法可以激活。使用激活工具激活或使用激活鑰匙激活。但是今天,我要給你...

  • compatible,ua模式

    compatible,ua模式 相關圖片ua兼容模式在行政長官的IE9下,公司的項目無法正常訪問,我們需要使用以下方法:使網頁與IE9兼容,并復制如下代碼:![如果lte ie 8]元http equiv=x-uincompatible...

  • 0x000000116藍屏,藍屏0x000000d1

    0x000000116藍屏,藍屏0x000000d1 相關圖片電腦藍屏0x0000016怎么辦我們知道,電腦使用不當會導致藍屏甚至無法啟動,原因有很多,如常見的硬件不兼容、軟件不兼容等。由于電腦藍屏的原因不同,解決方法也不同藍屏代碼0x00...

  • 彈跳的球球,彈跳球怎么做

    彈跳的球球,彈跳球怎么做 相關圖片一個球一直彈跳的游戲彈跳球是用html5實現的。別驚訝。它完全可以通過使用HTML5來實現具體截圖和代碼如下。有興趣的朋友可以參考夏哈,希望能幫你拷貝代碼如下:HTML頭元字符集=彈...

  • outlook激活密鑰,outlook怎么激活

    outlook激活密鑰,outlook怎么激活 相關圖片outlook激活碼在我知道outlook 2007即將被激活之前,我很高興下載并安裝它,準備使用它來獲取一些東西。但冷是無法打開的,后來朋友知道了,才告訴我需要激活Outlook2013office激活密鑰...

  • office 激活碼,office2010激活碼

    office 激活碼,office2010激活碼 相關圖片office2013永久激活碼已安裝的Office2016都是非活動試用版。使用一段時間后,會提示密碼過期或產品激活失敗有些人不知道office 2010激活碼是什么,所以他們無法使用新功能office激活...

  • ins標簽,ins如何帶標簽

    ins標簽,ins如何帶標簽 相關圖片ins標簽不顯示INS的數據解釋是:定義插入的文本INS有兩個標準屬性:cite和datetime引用的值是url,它指向另一個文檔以解釋插入新文本的原因;date time的ins怎么復制很多標簽...

  • 怎么把pdf文件轉換成word,幻燈片文件轉換成word

    怎么把pdf文件轉換成word,幻燈片文件轉換成word 相關圖片如何將掃描件轉換成word文檔將掃描的文件轉換成word文檔是我們工作中經常需要做的事情之一。有很多人認為這是一件比較困難的事情,但是只要有專業的軟件,就很簡單那么如何將掃描...

熱評文章

  • 聯想筆記本價格大全,聯想筆記本電腦哪款好

    聯想筆記本價格大全,聯想筆記本電腦哪款好 相關圖片筆記本品牌最近,很多小伙伴都在問小編,哪款筆記本更容易用我想把它們介紹給你,但我希望價格不要太高,在5000左右。所以小編今天要寫一本5000左右的筆記本。感興趣的合作伙聯想...

  • 電腦內存滿了怎么清理,電腦內存條怎么清理

    電腦內存滿了怎么清理,電腦內存條怎么清理 相關圖片電腦內存當計算機開始緩慢運行時,我們會考慮計算機中是否有太多垃圾。此時,我們將通過清理計算機來釋放內存。有很多方法可以清理計算機內存,你知道嗎如果你不知道,就往下...

  • css3,css3偽類選

    css3,css3偽類選 相關圖片css3新增的偽類制作步驟:首先在head tag結構下面的代碼中使用css3的prefix free.js腳本。CSS3中-Moz、-WebKit、-O、-MS的代碼可以省略如css3偽類before...

  • word空白頁刪除不了,word多了一頁空白頁怎么刪除

    word空白頁刪除不了,word多了一頁空白頁怎么刪除 相關圖片word分頁符怎么刪除word是一種辦公用具,經常被一些上班族和一些學生使用。辦公室工作人員經常用word處理文件。為什么有些學生經常用這個?因為當我們用電腦寫論文,做電腦作業或...

  • 尾注是注釋的一種嗎,軟件注釋有哪幾種

    尾注是注釋的一種嗎,軟件注釋有哪幾種 相關圖片html中注釋有幾種一。子選擇器:如果你想隱藏ie中的css定義,你可以使用子選擇器css部分:htmlbody p{/*declarations*/}2。通配符(*)。只有IE瀏軟件注釋分為哪幾種...

  • 手機打開ai文件的軟件,打開ai文件的軟件

    手機打開ai文件的軟件,打開ai文件的軟件 相關圖片什么軟件可以打開ai格式近日,有朋友問小編大達如何打開人工智能文件收到私信后,我特意打開電腦試著操作,然后告訴小朋友開封的過程但我相信還有其他合作伙伴不知道如何打開人...

  • office2017密鑰,office2016激活密鑰

    office2017密鑰,office2016激活密鑰 相關圖片office2019永久密鑰Office2017已準備就緒一些用戶已下載office2017但令一些用戶困擾的是,他們沒有激活密鑰。他們不知道如何激活Office2017。如果您沒有真正的office10密鑰...

  • 基礎組織,組織

    基礎組織,組織 相關圖片組織建設包括哪些方面(譯者注:由于譯言編輯對文章中的標簽進行了解析,我在每個標簽的符號后面加了一個空格,比如左尖括號 字段集 右尖括號,我會寫字段集,這樣就可以在文章...

  • 諾頓殺毒軟件好不好,諾頓殺毒軟件怎么買

    諾頓殺毒軟件好不好,諾頓殺毒軟件怎么買 相關圖片手機諾頓殺毒軟件我相信大多數可愛的電腦都被病毒感染了。像小編這樣的電腦經歷過各種病毒的“愛”。但幸運的是,每次我聰明機智的時候,我就解決了。為什么?因為小編一直在...

  • cpl濾鏡用法,濾鏡怎么使用

    cpl濾鏡用法,濾鏡怎么使用 相關圖片濾鏡用得好css波濾波器可能不會被很多朋友使用。事實上,它工作得很好,可以有很多奇怪的效果。Csswave過濾器可以垂直疊加對象的波樣式,使對象看起來像一個波語法示例:f濾鏡種類...

關注微信

变脸官网查询