css樣式覆蓋順序

時間 2019-12-14

標籤 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.樣式覆蓋整體原則：css

元素上的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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。