CSS控制樣式的三種方式 優先順序對比驗證

2022-07-29 21:03:14 字數 3176 閱讀 6246

**:

大家都知道,css的中文名叫做層疊樣式表,而css在控制樣式的時候,有三種引入方式,這裡簡單介紹下css控制樣式的三種方式

1>外部樣式表 : 將樣式規則直接寫在*.css檔案中,然後再*.html頁面中通過標籤引入的方式

2>內部樣式表 :(位於

外部樣式表

顯示效果:

下面我們開始驗證吧。

2>外部樣式表 vs 內部樣式表(先定義內部樣式表,再引入外部樣式表定義檔案) 加入內部樣式表,也就是說,直接在

外部樣式表(藍色) vs 內部樣式表(綠色)

顯示效果:

得出優先順序結果:外部樣式表 > 內部樣式表

3>外部樣式表 vs 內部樣式表(先引入外部樣式表定義檔案,再定義內部樣式表)這步很簡單,其實就是直接將link標籤剪下移動到上面到head標籤中定義內部樣式表的前面:

xiaoxuetu.html

複製**

**如下:

外部樣式表(藍色) vs 內部樣式表(綠色)

顯示效果:

得出優先順序結果:內部樣式表 > 外部樣式表

從<2>和<3>這兩部測試我們可以知道,在直接對標籤的樣式進行定義時,外部樣式表和內部樣式表的優先與他們的引入順序有關,嘿嘿,是不是很慶幸沒有完全相信官網所說的咧……

4>外部樣式表 vs 內聯樣式 直接在div標籤中定義樣式,這個時候我們修改下xiaoxuetu.html的**:

xiaoxuetu.html

複製**

**如下:

外部樣式表(藍色) vs 內聯樣式(紅色)

顯示效果:

得出優先順序結果:內聯樣式 > 外部樣式表

5>內聯樣式 vs 內部樣式表,這個時候我們修改下xiaoxuetu.html**:

xiaoxuetu.html

複製**

**如下:

內部樣式表(綠色) vs 內聯樣式(紅色)

顯示效果:

得出優先順序結果:內聯樣式 > 內部樣式表

從上面步驟<2>到<5>的對比中我們可以知道:內部樣式的優先順序是最大的,而內部樣式表和外部樣式表的優先順序得看他們的引入和定

義順序,如果先用內部樣式表定義了樣式,然後再引入通過外部樣式表定義的樣式,你們外部樣式表的樣式將會覆蓋內部樣式表定義的樣式,反之亦是一樣。

當然,這個情況只是用id或者class選擇的時候,也是一樣的。如果對乙個標籤的樣式定義既有class也有id選擇器的時候,同時又包含了三種樣式定義方式的,就得先看完下面的優先順序測試了。

三、判斷用id、class以及標籤選擇器定義樣式的優先順序

本次測試中,為了減少其他因素的影響,只採用內部樣式表來定義樣式,同時分別使用了id選擇器和class選擇器來選擇使用樣式的標籤。

1>三種方式並存的時候

xiaoxuetu.html

複製**

**如下:

單一顯示效果

只使用id(綠色)

只使用class(藍色)

先引入id定義的樣式再引入class定義的樣式

小學徒先引入class定義的樣式再引入id定義的樣式

小學徒顯示效果:

得出優先順序結果 id選擇器 > class選擇器 > 標籤選擇器

2>當只有兩個class或者兩個id的時候

xiaoxuetu.html

複製**

**如下:

兩個class的時候

classtest2(黃色)先classtest(藍色)後

classtest(藍色)先classtest2(黃色)後

兩個id的時候

idtest(綠色)先idtest2(黃綠色)後

idtest2(黃綠色)先idtes(綠色)t後

顯示效果:

得出優先順序結果:當且僅當有兩個或者是多個class或者id的時候,誰在前面就誰的優先順序高。

3>只有標籤div選擇器的時候

xiaoxuetu.html(藍色樣式先,紅色樣式後)

複製**

**如下:

藍色樣式先,紅色樣式後

顯示效果:

xiaoxuetu2.html(紅色樣式先,藍色樣式後)

複製**

**如下:

紅色樣式先,藍色樣式後

顯示效果:

從兩個結果我們可以知道,當只有標籤選擇器的時候,後面定義的樣式表的優先順序就越高。

四、總結

1.當只使用id選擇器、class選擇器或者標籤選擇器的時候,不管是使用多少種樣式表定義方式,都是內嵌樣式的優先順序最高,接下來外部樣式表和內部樣式表的就得看他們的引入順序了;

2.當只使用id選擇器或者class選擇器的時候,同乙個標籤內不管使用了多少個,都是排在前面的優先順序更高;

3.當只使用標籤選擇器的時候,如果定義了多個一樣的,你們寫在最後面的標籤選擇器生效,也就是它的優先順序最高;

4.當同乙個標籤中既有id選擇器,又有class選擇器,同時又有標籤選擇器的時候,優先順序的次序是id選擇器 > class選擇器 > 標籤選擇器;

5.當每一種都有的時候,那就根據具體情況具體分析吧,嘿嘿,哈哈……

CSS控制樣式的三種方式 優先順序對比驗證

大家都知道,css的中文名叫做層疊樣式表,而css在控制樣式的時候,有三種引入方式,這裡簡單介紹下css控制樣式的三種方式 1 外部樣式表 將樣式規則直接寫在 css檔案中,然後再 html頁面中通過標籤引入的方式 2 內部樣式表 位於 外部樣式表 顯示效果 下面我們開始驗證吧。2 外部樣式表 vs...

css的三種引入方式及優先順序

第一 css的三種引入方式 1.行內樣式 最直接最簡單的一種,直接對html標籤使用style 例如 缺點 html頁面不純淨,檔案體積大,不利於蜘蛛爬行,後期維護不方便。2.內嵌樣式 內嵌樣式就是將css 寫在之間,並且用進行宣告,例如 優缺點 頁面使用公共css 也是每個頁面都要定義的,如果乙個...

CSS的三種樣式表和優先順序

1 外部樣式表 當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用 標籤鏈結到樣式表。css1.1樣式表 h1 2 內部樣式表 當單個文件需要特殊的樣式時,就應該使用內部樣式表。你可以使用我是乙個div 3 內聯樣...