css樣式的優先順序

2021-09-29 13:22:08 字數 1013 閱讀 8342

、相同權值情況下,css樣式的優先順序總結來說,就是——就近原則(離被設定元素越近優先級別越高):

內聯樣式表(標籤內部)> 嵌入樣式表(當前檔案中)> 外部樣式表(外部檔案中)。

2、權值不同時,瀏覽器是根據權值來判斷使用哪種css樣式的,哪種樣式權值高就使用哪種樣式。

下面是權值的規則:

標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。例如下面的**:

p /標籤,權值為1/

p span /兩個標籤,權值為1+1=2/

p>span/權值與上面的相同,因此採取就近原則/

.warning /類選擇符,權值為10/

p span.warning /權值為1+1+10=12/

#footer .note p /權值為100+10+1=111/

注意:(1)還有乙個權值比較特殊——繼承也有權值但很低,有的文獻提出它只有0.1,所以可以理解為繼承的權值最低。(繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。如

便簽內部的標籤就會繼承該

標籤的樣式);

(2)做網頁**的時,有些特殊的情況需要為某些樣式設定具有最高權值,可以使用!important來解決。如下**:

p這裡注意當網頁製作者不設定css樣式時,瀏覽器會按照自己的一套樣式來顯示網頁。並且使用者也可以在瀏覽器中設定自己習慣的樣式,比如有的使用者習慣把字型大小設定為大一些,使其檢視網頁的文字更加清楚。這時注意樣式優先順序為:瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式,但記住!important優先順序樣式是個例外,權值高於使用者自己設定的樣式。

3、使用js對樣式進行操作時往往可通過兩種方式:object.style.property=new style和object.classname = new classname。前者是修改行間樣式,js**執行後,審查元素可看到樣式會直接顯示在行間**中;後者則是在行間增加了新的class,而不會將具體的樣式**顯示出來。由於行間樣式的優先順序更高,在用前者修改了某個樣式的情況下,後者若對其做修改則不會有效果。

css樣式優先順序

多重樣式將層疊為乙個 樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中,在 html 頁的頭元素中,或在乙個外部的 css 檔案中。甚至可以在同乙個 html 文件內部引用多個外部樣式表。層疊次序 當同乙個 html 元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有...

CSS樣式優先順序

css樣式分為內聯樣式和外部樣式,一般情況下 內聯樣式的優先順序大於外部樣式。即style樣式 id選擇器 class選擇器 元素選擇器。例如 on person num li當對li標籤新增上面兩個樣式時,on樣式中重複的內容是不會生效的。因為.on樣式的優先順序值小於li,它會被li樣式覆蓋。但...

css樣式優先順序

css樣式分類 外聯樣式,內部樣式,內聯樣式,行內樣式 標籤屬性 優先順序 行內樣式 標籤屬性 外聯樣式 內部樣式 內聯樣式,這裡的高度為110px class login class imgs 選擇器 權值內聯樣式表的權值最高 1000 id 選擇器的權值 100class 類選擇器的權值 10h...