CSS總結 層疊

2021-10-08 10:36:15 字數 2381 閱讀 6175

css全稱叫層疊樣式表,那麼為什麼css叫做層疊樣式表呢?首先我們需要了解下什麼衝突規則

衝突規則

在某些時候,在做乙個專案過程中你會發現一些應該產生效果的樣式沒有生效。通常的原因是你建立了兩個規則同時對相同的元素生效。我們需要在衝突發生時決定應該使用那一條規則。

層疊 stylesheets cascade(樣式表層疊) 簡而言之,css規則的順序非常重要,當兩條同級別的規則應用到同乙個元素的時候,寫在最後的就是實際使用的規則。

h1

h1

>

this is my heading.h1

>

結果

優先順序

瀏覽器是根據優先順序來決定當多個規則有不同選擇器對應相同的元素的時候需要使用那個規則,基本上是衡量選擇器具體選擇那些區域的尺度。

類選擇器

類選擇器更加具體——它會選擇該頁面中有特定class屬性的元素,所以它的優先順序更高。

元素選擇器

元素選擇器不是非常具體——它會選擇頁面上該型別的所有元素,因此它的優先順序就低一些。

例如:

.main-heading

h1

class

="main-heading"

>

this is my heading.h1

>

結果

繼承 繼承是指一些設定在父元素上的css屬性可以被子元素繼承的,但是並不是所有的都能繼承。

例如:我設定body元素為藍色,然後文件中每個body元素都是藍色,除非像這樣在span元素上設定屬性。

body

span

>

像這樣字型顏色設定為藍色,這是通過繼承實現的p

>

>

我們可以通過選擇器其來改變元素的顏色,像這個

>

例子span

>

.p>

結果

不過像widths,margins,padding,borders這些屬性的值往往不會被繼承,從某種程度上來說,那個屬性會預設繼承是由常識決定的。

繼承的控制

inherit

本屬性會使子元素屬性和父元素相同,實際上就是開啟繼承

initial

設定屬性值與瀏覽器預設樣式相同,如果瀏覽器的預設樣式沒有設定,且這個屬性是自然繼承的那麼會設定為inherit

unset

本關鍵字將屬性重置為自然值,也就是如果屬性是自然繼承的那麼就和inherit一樣,否則就會和initial一樣.

例如

body

.my-class-1 a

.my-class-2 a

.my-class-3 a

>

>

default

href

="#"

>

linka

>

colorli

>

class

="my-class-1"

>

inherit the

href

="#"

>

linka

>

colorli

>

class

="my-class-2"

>

reset the

href

="#"

>

linka

>

colorli

>

class

="my-class-3"

>

unset the

href

="#"

>

linka

>

colorli

>

ul>

結果:

由此可見繼承中也體現了順序,這樣我們引出了層疊中最後乙個影響因素——資源排序

資源排序

以上就是我對css中層疊的理解了,如果有遺漏之處,歡迎小夥伴斧正哦。

CSS的「層疊」規則的總結

css的 層疊 規則的總結 當你隨機開啟乙個頁面,檢視源 你會發現,同乙個元素,不止有乙個css選擇器及對應的樣式。而乙個元素只能應用乙個樣式,那麼一堆樣式中究竟是應用哪乙個呢?這就涉及到css的層疊規則了。下面就來總結下css的層疊規則。1 瀏覽器預設的樣式 2 使用者自定義樣式。一些頁面中會提供...

CSS層疊排序

在層疊排序背後的指導性原則是 普通 general 選擇符會設定文件的總體樣式,更具體的 more specific 選擇符則會覆蓋掉普通的選擇符,以為器提供更加特殊的樣式。下面按從高倒低的順序列出6個選擇符群組 1 使用important規則群組擁有最高優先順序。它們會覆蓋掉所有非 importa...

css層疊樣式

css 四大核心 一 選擇器 二 盒子模型 實現網頁布局 三 浮動四 四 定位 了解css 概念 層疊樣式表 級聯樣式表 cascading style s heet 作用 美化網頁 通過css的方式給html標籤設定樣式 css語法 選擇器 類選擇器 語法 1.定義型別.自定義型別名 2.呼叫型別...