Css樣式優先順序問題

2021-07-23 20:05:40 字數 1820 閱讀 6272

(?)

[+]

想要對乙個標籤處理它的樣式,可以用 class=「」 的方式來定義它的類,然後在類中處理他的樣式

例如: 

[html]view plain

copy

print?

<

style

>

.box  

style

>

<

divclass

="box"

>

div>

當然也可以用 id ,或者乾脆直接對標籤寫樣式,然而如果把這些定義都放在了乙個元素中的時候,就矇圈了,計算機到底先處理誰呢?需要更改的時候,改哪個呢?

比如這樣的問題:

[html]view plain

copy

print?

<

style

>

div{}  

.aa{}  

#bb{}  

style

>

<

divclass

="aa"id=

"bb"

style

="***:***"

>

div>

裡面既定義了 標籤 div 又定義了 類aa 還定義了 bb,而且又在裡面定義了 行內樣式 style="***:***" 那麼如果我要更改的話,到底改誰呢。這就涉及到乙個css 樣式優先順序的問題了。

經過總結:得到如下經驗:

優先順序:

規則一:標籤< class < id < 行內樣式

規則二:同級元素以順序排序作為判斷依據:下面的覆蓋上面的

例子一:

[html]view plain

copy

print?

<

style

>

.hh  

#bo /*綠色*/  

一、優先順序高的 如果定義的屬性和優先順序低的定義的屬性相衝突,那麼會覆蓋優先順序低的

二、優先順序低的定義的屬性,優先順序高的沒有再次定義,那麼會繼承優先順序低的

同級元素以順序排序作為判斷依據:下面的覆蓋上面的 例:

[html]view plain

copy

print?

<

style

>

.box1  

.box1      /*綠色*/  

.box1      /*紅色*/  

一:優先順序相同級別的情況下,系統按照最後一次定義的屬性為標準。下面覆蓋上面的

原因:瀏覽器解釋html 語言的方式是從上往下,從左往右的解釋,通過解釋完所有樣式得出最終結果才會顯示出來

css樣式優先順序問題

官方表述的css樣式優先順序如下 通用選擇器 元素 型別 選擇器 類選擇器 屬性選擇器 偽類 id 選擇器 內聯樣式 css 偽類用於向某些選擇器新增特殊的效果屬性選擇器可以根據元素的屬性及屬性值來選擇元素。那麼,我們來舉個例子 html 引入乙個style.css樣式 在style.css樣式中寫...

css樣式優先順序問題

官方表述的css樣式優先順序如下 通用選擇器 元素 型別 選擇器 類選擇器 屬性選擇器 偽類 id 選擇器 內聯樣式 css 偽類用於向某些選擇器新增特殊的效果 屬性選擇器可以根據元素的屬性及屬性值來選擇元素。那麼,我們來舉個例子 html 引入乙個style.css樣式 在style.css樣式中...

css樣式優先順序問題

此片部落格為參考部落格,更多詳情可看 官方表述的css樣式優先順序如下 通用選擇器 元素 型別 選擇器 類名選擇器 屬性選擇器 偽類選擇器其中內聯樣式只能通過style 來宣告 而上面的通用選擇器到id選擇器都是既可以在嵌入樣式中宣告也可以在外部樣式中引用,同樣的選擇器,在嵌入樣式中宣告的優先順序總...