css樣式的繼承性、層疊性、優先級

MkkHou 發布于2019-04-23 11:44 / 1746人閱讀

摘要：一樣式的繼承性作用給父元素設置一些屬性，子元素也可以使用應用場景一般用于設置網頁上的一些共性信息，例如網頁的文字顏色，字體，文字大小等內容。

一、css樣式的繼承性:

作用：給父元素設置一些屬性，子元素也可以使用應用場景：一般用于設置網頁上的一些共性信息，例如網頁的文字顏色，字體，文字大小等內容。優化代碼，降低工作量注意點： 1.并不是所有的屬性都可以繼承，、只有color/font-/text-/ line開頭的屬性才能繼承； 2.在css的繼承中，不僅僅是兒子可以繼承，只要是后代都能繼承 3.繼承性中的特殊性 3.1 a標簽的文字和顏色和下劃線是不能繼承父元素的——舉例：


 
         < div>
              我是大標題
              我是超鏈接
               我是段落

（上面的代碼，只有p繼承了div設置的屬性，而a標簽是不能繼承父元素的屬性,顏色不會變紅，下劃線也不會被去掉）

3.2 h標簽的文字大小也是不能繼承父元素的(見上面代碼，

標簽中我是大標題不會繼承
的? ?font-size:24px;屬性，所以需要給
多帶帶寫個css樣式：h1{font-size:24px;}
應用場景：一般用于設置網頁上的一些共性信息，例如網頁的文字顏色，字體，文字大小燈內容格式： body{屬性：值;} ? 二、層疊性比如p標簽，給p標簽設置id和class類名，選擇器上選擇p 和p的id或者class類名，設置相同的屬性，就是層疊性 ? 三、優先級：（三一）作用：當多個選擇器（比如選擇p標簽和p標簽里設置的id或者class昵稱），選中同一個標簽，并且給同一個標簽設置相同的屬性時，如何層疊就優先級來確定。 2.優先級判斷的三種方式 2.1 是否直接選中，直接選中指的是直接選中要設置css樣式的標簽，和標簽的id或者class類名。（間接選中就是指的是繼承性，比如選擇
那里面的li繼承ul的屬性，就稱為繼承屬性）如果是間接選中，誰離目標標簽比較近就聽誰的。 2.2是否是相同的選擇器。如果是相同選擇器，那么就是誰寫在后面就聽誰的。（比如給兩個p標簽設置css樣式 p{color:blue} p{color:red｝那么就會以第二個p為標準，文字變成紅色 ? 2.3不同的選擇器如果都是直接選中，并且不是相同類型的選擇器，那么就會按照選擇器的優先級來層疊 id>類>標簽>通配符>繼承>瀏覽器默認 ? ? 權重計算 ? 如果選擇器里有直接選中和間接選中。哪怕是間接的選擇器為id選擇器，也會優先實行直接選中的效果

云服務器 GPU云服務器 html外部層疊樣式 css的樣式 html的css樣式 java繼承傳遞性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1085.html

上一篇：前端vue系列-起始篇 vue的基本認知

下一篇：a標簽偽類選擇器以及偽元素:hover的案例

CSS的三大特性

? 本文內容： ? 層疊性繼承性優先級權重計算方法（特異性） ? ? 首發日期：2018-05-01 層疊性：層疊性是指當一個標簽被設置了多個重復的樣式的時候，一個屬性會覆蓋另外一個屬性。比如：先給div設置背景顏色為紅色，然后設置背景顏色為粉紅色，那么最終顏色可能為紅色，也可能為粉紅色（明顯的兩種顏色設置不能并立，所以只為其一，這里沒給出確定答案是因為還要考慮優先級...

duan199226 2019-04-23 13:46 評論0 收藏0
【譯】CSS繼承、層疊和全局作用域

摘要：相反的，提供了全局作用域和局部作用域。組成界面的分子的樣式可以通過元素選擇器定位。元素選擇器的優先級很低，因此他們不會覆蓋任何基于類選擇器的樣式。使用元素選擇器有以下優點避免了的冗長沒有冗余的類。最近學習到CSS的繼承屬性，正好看到這篇文章，便將它翻譯出來。作者的思想，在平時的項目中或多或少都有用過，但是從來沒有仔細去思考如何利用這些特性讓代碼更加優雅。我熱愛模塊化設計。長期以來，...

WilsonLiu95 2019-08-29 12:57 評論0 收藏0
CSS節選——選擇器

摘要：，，層疊樣式表，請留意層疊概念。為了區分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類。常見偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內容。CSS，cascading style sheet，層疊樣式表，請留意層疊概念。 css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類——:hover,:link,:active,:targ...

番茄西紅柿 2019-04-23 13:42 評論0 收藏0
【零基礎入門】 css學習筆記（3）選擇器與層疊性

摘要：，高級選擇器后代選擇器空格表示后代選擇器就是的后代所有的。注意是后代，并不一定是兒子空格可以出現多次補充后代選擇器中出現的東西很靈活，可以是標簽，可以是名，可以是名后代選擇器，就是一種平衡共性特性的平衡。一，選擇器 1，基礎選擇器 1）標簽選擇器：div{ } ，選擇的所有，而不是一個，用來描述共性。 2）類選擇器：.class名{ } 多個元素可以同時屬...

cppprimer 2019-08-29 15:43 評論0 收藏0
WEB前端 CSS

摘要：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。后代選擇器后代選擇器標簽選擇器后跟標簽后代，無論直屬還是間接直屬，直接后代毗鄰后代中最近的一個弟弟，找到和自己同級的標簽如通過多個選擇器好到具體的標簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡介 CSS引入方式 CSS結構 CSS選擇器標簽選擇...

darry 2019-04-23 13:34 評論0 收藏0