層疊機制和繼承的概念以及CSS中選擇器的優先順序

2022-09-12 15:24:22 字數 685 閱讀 3058

層疊機制:

乙個元素的某個特定的樣式屬性可能來自行間的style屬性、內聯樣式表或者外部引入的樣式表,以及瀏覽器自定義的樣式,還有就是繼承自父元素的樣式,但是最終只會選擇其中的某乙個來表示,這個選擇的過程就被稱為層疊(cascading)。

繼承機制:

在繼承機制中,樣式不僅會應用到指定的元素,還會應用到它的後代中沒有設定特定樣式的元素,他的後代元素的樣式就是繼承自它父級的樣式,但是不是父級所有的樣式都會被繼承,一般關於文字的樣式都會被繼承下來。

選擇器的優先順序:

!important>行內樣式》id選擇器》類選擇器》元素選擇器》萬用字元》繼承

內嵌樣式的個數

id選擇器的個數

類選擇器的個數

元素選擇器的個數

行內樣式10

00id選擇器01

00類選擇器、偽類選擇器00

10元素選擇器、偽元素選擇器00

01萬用字元000

0!important

最高最高

最高最高

優先順序的計算方法:權重;(0,0,0,0)

第乙個0表示內嵌的個數,第二個表示的是id選擇器的個數,

第三個是類選擇器的個數,第四個是元素選擇器的個數,

然後多個選擇器組合後的優先順序就是權重,層疊樣式會選擇權重大的。

即元素的樣式會由權重最大的選擇器裡面設定的屬性決定。

CSS 層疊和繼承

我們知道文件中的乙個元素可能同時被多個css選擇器選中,每個選擇器都有一些css規則,這就是層疊。這些規則有可能不矛盾的,自然這些規則將會同時起效,然而有些規則是相互衝突的,例如 html xmlns head title css cascade title style type text css ...

css的繼承和層疊

important 行內式 id選擇器 類選擇器 標籤選擇器 權重值 無窮大 1000 100 10 1 同一選擇器,靠後者生效 繼承的權重值為零,所以繼承的樣式可以被任何選擇器修改的屬性對應的屬性值所覆蓋。例 如上所示,案例一和案例二兩個h1標籤繼承了來自父元素的id選擇器所賦予的color屬性值...

css特性 繼承和層疊

1.乙個元素如果沒有設定某屬性的值,就會跟隨父元素的值 2.當然,乙個元素如果有設定某屬性的值,就會使用自己設定的值 3.比如color font size等屬性是可以繼承的 4.可以用inherit強制繼承 5.css繼承的是計算值 css允許多個css屬性層疊 1.使用相同的選擇器,後面的會把前...