CSS 中樣式覆蓋優先順序

2021-07-13 09:49:34 字數 980 閱讀 3188

我們在日常開發,總會遇到樣式覆蓋問題。有時候修改後的樣式,並沒有根據自己的意願顯示出來。這裡就可能跟樣式覆蓋優先順序有關。

1、首先,層疊優先順序是

內聯樣式 > 內部樣式表 > 外部樣式表

下面以具體例項說明

**:

test.html檔案

lang="zh-cn">

charset="utf-8">

層疊優先順序title>

rel="stylesheet"

href="test.css">

type="text/css">

p

style>

head>

style="color: red">這是一段文字p>

body>

html>

test.css檔案

p

執行結果

這個結果很容易看到,外部樣式表樣式 的字型顏色和大小被內部樣式表 的字型顏色和大小覆蓋了, 內部樣式表 的字型顏色被 內聯樣式 覆蓋掉了。

2、選擇器優先順序

lang="zh-cn">

charset="utf-8">

層疊優先順序title>

rel="stylesheet"

href="test.css">

head>

class="pct"

id="pit">

id選擇器 > class選擇器 > 標籤選擇器

p>

body>

html>

p

.pct

#pit

css樣式的覆蓋優先順序

當使用body元素應用樣式時 body 其他元素都會繼承此body元素,比如文字會是綠色 你的段落 在之前的基礎上,當我們建立乙個使文字變成藍色的css class text1 並應用到乙個元素時,新建的class會覆蓋body元素的color green,所應用顏色為藍色 你的段落 多個class...

css樣式優先順序

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

CSS樣式優先順序

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