DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> css樣式覆蓋順序
css樣式覆蓋順序
編輯:CSS特效代碼     
0.樣式位置分類 1)使用外部css文件
<link href="/static/css/main.css" rel="stylesheet">
2)使用head中的style元素
<head>
<style type="text/css">
    .main{color:red;}
</style>
</head>
3)使用元素上的style
<body style="color:red;"></body>
 

1.樣式覆蓋總體原則:

元素上的style > 文件頭上的style元素 >外部樣式文件 不同級別的樣式均對同一元素進行渲染時,對於沖突的樣式,會優先采取元素上的style去覆蓋文件頭上的style元素;對於不沖突的樣式,會進行樣式疊加。 例如:
<head>
<style type="text/css">
    .main{color:red;background-color:yellow;}
</style>
</head>
<body id="mainbody" class="main" style="color:green;"></body>
對於body元素,元素style與文件頭上的style均會命中,此時,backgroud-color樣式會進行疊加,color樣式出現沖突,會優先選用body元素中的樣式。渲染結果為:
color:green;
background-color:yellow;
  2.同級別樣式文件下: 1)樣式表的元素選擇器選擇越精確,樣式優先級越高: id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式 在示例中,css進行渲染時,#mainbody > .main > body   2)對於相同類型選擇器制定的樣式,在樣式表文件中,越靠後的優先級越高: 這裡是樣式表文件中越靠後的優先級越高,而不是在元素class出現的順序。   例如,.class2 在樣式表中出現在.class1之後,
.class1{
    color:red;
}
.class2{
    color:green;
}
對於
<div class="class2 class1">
<div class="class1 class2">
雖然class1在元素中指定時排在class2的後面,但因為在樣式表文件中class1處於class2前面,此時仍然是class2的優先級更高,將采用 color:green    3)如果要讓某個樣式的優先級變高,可以使用!important
<head>
<style type="text/css">
    .main{color:red !important; background-color:yellow;}
</style>
</head>
<body id="mainbody" class="main" style="color:green;"></body>
由於head的style中使用了 !important ,渲染時將會采用 color:red 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved