2. 程式人生 > >css三大特性繼承、層疊和優先順序(權重)

css三大特性繼承、層疊和優先順序(權重)

阿新 • • 發佈：2019-02-14


1 繼承

CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下面程式碼：如某種顏色應用於p標籤，這個顏色設定不僅應用p標籤，還應用於p標籤中的所有子元素文字，這裡子元素為span標籤。

p{color:red;}

<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

可見右側結果視窗中p中的文字與span中的文字都設定為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;

p{border:1px solid red;}

<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

在上面例子中它程式碼的作用只是給p標籤設定了邊框為1畫素、紅色、實心邊框線，而對於子元素span是沒用起到作用的。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
  5. <title>繼承</
    title>
  6. <styletype="text/css">
  7. p{color:red;}  
  8. p{border:1px solid red;}  
  9. </style>
  10. </head>
  11. <body>
  12.     <h1>勇氣</h1>
  13.     <pclass="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
  14.     <
    pid="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<span>簡單</span>的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
  15. </body>
  16. </html>

2 特殊性

有的時候我們為同一個元素設定了不同的CSS樣式程式碼，那麼元素會啟用哪一個CSS樣式呢?我們來看一下面的程式碼：

p{color:red;}
.first{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？green是正確的顏色，那麼為什麼呢？是因為瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。

下面是權值的規則：

標籤的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。例如下面的程式碼：

p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
  5. <title>特殊性</title>
  6. <styletype="text/css">
  7. p{color:red;}  
  8. .first{color:green;}/*因為權值高顯示為綠色*/  
  9. span{color:pink;}/*設定為粉色*/  
  10. p span{color:purple;}/*設定權值更高的CSS樣式程式碼來覆蓋以前的CSS樣式程式碼*/  
  11. </style>
  12. </head>
  13. <body>
  14.     <h1>勇氣</h1>
  15.     <pclass="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
  16.     <pid="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
  17. </body>
  18. </html>

3 層疊

我們來思考一個問題：如果在html檔案中對於同一個元素可以有多個css樣式存在並且這多個css樣式具有相同權重值怎麼辦？好，這一小節中的層疊幫你解決這個問題。

層疊就是在html檔案中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。

如下面程式碼:

p{color:red;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

最後 p 中的文字會設定為green，這個層疊很好理解，理解為後面的樣式會覆蓋前面的樣式。

所以前面的css樣式優先順序就不難理解了：

內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
  5. <title>層疊</title>
  6. <styletype="text/css">
  7. p{color:red;}  
  8. p{color:green;}  
  9. p{color:pink;}/*使用層疊的方式設定兩段文字顏色為粉色*/  
  10. </style>
  11. </head>
  12. <body>
  13.     <h1>勇氣</h1>
  14.     <pclass="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
  15.     <pid="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<span>簡單</span>的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
  16. </body>
  17. </html>

4 重要性

我們在做網頁程式碼的時，有些特殊的情況需要為某些樣式設定具有最高權值，怎麼辦？這時候我們可以使用!important來解決。

如下程式碼：

p{color:red!important;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

這時 p 段落中的文字會顯示的red紅色。

注意：!important要寫在分號的前面

這裡注意當網頁製作者不設定css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。並且使用者也可以在瀏覽器中設定自己習慣的樣式，比如有的使用者習慣把字號設定為大一些，使其檢視網頁的文字更加清楚。這時注意樣式優先順序為：瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式，但記住!important優先順序樣式是個例外，權值高於使用者自己設定的樣式。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
  5. <title>!important</title>

  6. 相關推薦

    css三大特性繼承、層疊和優先順序(權重)

    1 繼承 CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下面程式碼：如某種顏色應用於p標籤，這個顏色設定不僅應用p標籤，還應用於p標籤中的所有子元素文字，這裡子元素為sp

    CSS繼承、層疊和特殊性

    important alt images png import 根據 gre 原來 border 1.繼承 （1）樣式應用於某個特定的HTML標簽元素，而且應用於其後代。 （2）但某些標簽不適用，如border； （3）例子：p{color:red;}設置了顏色 <p

    7. CSS樣式基本知識與選擇器、繼承、層疊和特殊性

    css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成   p{ color: blue }   p_選擇符   {}_宣告   color_屬性   blue_值 第7章 CSS樣式基本知識     內聯式、嵌入式和外部式三種   三種方法的優先順序:內聯式 >

    學習筆記——CSS的高階特性：複合、繼承、層疊

    版權宣告：本文為博主原創文章，未經博主允許不得轉載。    https://blog.csdn.net/gaoce227/article/details/72784888 一、複合選擇器 css基本選擇器有標記選擇器、ID選擇器和類選擇器三種，由此三種組合又構成了複合選

    css的三大特性（繼承，層疊，優先順序）

    一，繼承 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-css三大特性之繼承性.

    css的三大特性繼承性，層疊行，優先級

    並且 img 分享 指定 作用 important 通配 技術 text 1、繼承性 #1、定義：給某一個元素設置一些屬性，該元素的後代也可以使用，這個我們就稱之為繼承性 #2、註意： 1、只有以color、font-、text-、line-開頭的屬性才可以繼

    CSS(4)---三大特性(繼承性，層疊性，優先順序)

    CSS(4)---三大特性(繼承性，層疊性，優先順序) CSS有三大特性分別是: 繼承性，層疊性，優先順序。 一、繼承性 概念 給父元素設定一些屬性，子元素也可以使用，這個我們就稱之為繼承性。 注意 1.並不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承

    02CSS繼承，層疊和優先級07

    命名 log meta sidebar 減少 back div utf-8 先後 day07 CSS繼承和層疊 CSS繼承 好處： 　　1.父元素設置樣式，子元素可以繼承部分屬性 　　2.減少代碼 CSS層疊 　　可以定義多個樣式 　　不沖突時，多個樣式可層疊為

    CSS層疊和繼承

    meta -c center p s 文字 通過 charset 變換 決定 　　CSS具有兩個核心的概念——繼承和層疊。一般文本類的屬性會被繼承，即某個元素的CSS屬性會傳遞給內部嵌套的元素。一個元素可能有一個或者多個樣式的來源，當屬性發生沖突時，就會根據加載順序和權

    CSS的兩個核心概念——層疊和繼承

    rom 核心概念 clas 兩個 屬性 同時 加載 字體 繼承 1、繼承： 是指應用在某個標簽/元素上的CSS屬性傳遞給了內部嵌套的標簽。 通常來說文本類的會被繼承（字體、字號、顏色） chrome裏面是灰色的表示沒有繼承 2、 1-1繼承 1- 2一個標簽可能有一個或多個

    CSS學習摘要-層疊和繼承

    In doc 示例 現在 fault red select 類型 thead 當有多個選擇器作用在一個元素上時，哪個規則最終會應用到元素上？ 其實這是通過層疊機制來控制的，這也和樣式繼承(元素從其父元素那裏獲得屬性值)有關。 元素的最終樣式可以在多個地方定義，它們以復雜的形

    CSS優先順序、CSS選擇器、解決衝突——繼承與層疊

    2014年10月12日 11:09:20 一紙畫扇 閱讀數：3660 標籤： css

    關於CSS中繼承、特殊性、重要性、層疊的理解

    CSS繼承: CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？簡單的來說，繼承就是應用樣式的元素的後代會繼承樣式的某些屬性。         例：p{color;blue;}            

    CSS層疊上下文、層疊等級、層疊順序、z-index

    頁面布局 tps 特定 情況下 bsp 發生 模型 等級 結果 以往，由於自己使用z-index的頻率不大，所以對這個CSS屬性存在比較片面的認識。一直認為z-index就是用來描述定義一個元素在屏幕Z軸上的堆疊順序。z-index值越大在Z軸 上就越靠上，也就是離屏幕觀

    Java面向物件三大特性-封裝、繼承、多型

    在講Java面向三大特性之前，我們先了解一下訪問修飾符的訪問範圍： （1）：private：同類中具有訪問許可權。 （2）：protected：本類 和同包以及不同包的子類才具有訪問許可權。 （3）：public：統一工程中都具有訪問許可權。 （4）：預設 本類和同包範圍內具有訪問許可權。 一、Ja

    補習：C# 面向物件三大特性:封裝、繼承、多型

    C# 面向物件三大基本特性 封裝、繼承、多型 1、封裝 隱藏物件的屬性和實現細節，僅對外公開介面，控制在程式中屬性的讀取和修改的訪問級別。 C# 封裝根據具體的需要，設定使用者的訪問許可權，並通過 訪問修飾符 來實現。 一個 訪問修飾符 定義了一個類成員的範圍和可

    css的繼承以及層疊

    設置 絕對定位 但是 import ext clas 影響 css color 繼承 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U

    JAVA初級(八)物件之三大特性:繼承(1)繼承基礎使用和作用

    本節主要介紹:繼承 什麼是繼承？ 繼承如何實現.extends關鍵字.繼承有什麼用？ 什麼是繼承？ 繼承是java面向物件程式設計技術的一塊基石，因為它允許建立分等級層次的類。 繼承就是子類繼承父類的特徵和行為，使得子類物件（例項）具有父

    面向物件程式設計三大特性------封裝、繼承、多型

    一、封裝     封裝從字面上來理解就是包裝的意思，專業點就是資訊隱藏，是指利用抽象資料型別將資料和基於資料的操作封裝在一起，使其構成一個不可分割的獨立實體，資料被保護在抽象資料型別的內部，儘可能地隱藏內部的細節，只保留一些對外介面使之與外部發生聯絡。系統的其他物件只能

    面向物件三大特性-----封裝、繼承、多型

    前言 　　前面有文章寫到了面向物件程式設計和麵向物件設計的頭五大原則(SOLID五大原則)。今天我們再來談談面向物件的三大特性--封裝、繼承、多型 封裝  　　被定義為"把一個或多個專案封閉在一個物理的或者邏輯的包中"。在面向物件程式設計方法論中，封裝是為了防止對實現細節的訪問。封裝只公開某些