CSS樣式疊加

css可以把多個樣式加到同乙個元素上。如果多個樣式有重合，瀏覽器會根據權重的大小進行樣式覆蓋，這就是層疊樣式表的由來。

下面我們先來看一下疊加是怎麼回事。

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>document
title
>
<
style
>
/*id選擇器權重最大，放在elements的最上面 
*/#div 
/*class選擇器權重比id選擇器小，但是比id選擇器大，所以background會被覆蓋 
*/.div 
/*元素選擇器權重最小，所以font-size和background會被覆蓋 
*/div 
style
>
head
>
<
body
>
<
div 
class
="div"
id="div"
>
hello css
div>
body
>
html
>

在瀏覽器的elements中，權重大的永遠在上面，並且，被覆蓋了的樣式也會特殊標記出來。

css屬性不同,樣式疊加

很多網頁設計師都知道乙個class對應乙個樣式，但它們不是一對一的關係，css樣式其實是可以一對多的。如果a塊需要用到加粗 顏色，b塊需要用到顏色 字型，按一對一原則，我們需要在每個css樣式裡面加入顏色 但當有n個地方要用到顏色時，如果我們還像以前一樣，每個都加的話，就有浪費資源了。我們可以製作不...

JS 樣式疊加顯示

doctype html html head meta charset utf 8 title title style type text css aa a1 a11 a111 a12 a112 a2 a21 a22 bb b1 b2 b21 b211 b22 b231 b224 b241 b23 ...

CSS外邊距疊加

盒模型概念 盒模型是css的基石之一，它指定元素如何顯示及 在某種程度上 如何相互互動。頁面上的每乙個元素都被看做乙個矩形框，這個框右元素的內容 內邊距 邊框和外邊距組成，如下圖 如果給元素新增背景，背景會應用於內容和內邊距組成的區域。新增邊框會在內邊距的區域外加一條線。外邊距是透明的，一般使用它控...