CSS的三大特性-層疊性/繼承/優先級

2020-11-23 騰訊網

CSS的三大特性：層疊性、繼承性、優先級

1. 層疊性

概念：相同選擇器給設置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個衝突的樣式。層疊性主要解決樣式衝突的問題

層疊性原則：

樣式衝突：遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式

樣式不衝突，不會重疊

2. 繼承性

概念：子標籤會繼承父標籤的某些樣式，如文本顏色和字號，簡單理解就是子承父業

特點：

子元素可以繼承父元素的樣式（text-、font-、line-這些元素開頭可以繼承，以及color屬性）

恰當地使用繼承可以簡化代碼，降低CSS樣式的複雜性

行高的繼承性：

特點：

行高可以跟單位也可以不跟單位

如果子元素沒有設置行高，則會繼承父元素的行高為1.5

如果子元素已經設置行高，則當前子元素的行高為當前元素的文字大小 * 1.5

body行高1.5 這樣寫法最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高

3. 優先級

概念：當一個元素指定多個選擇器，就會有優先級的產生

特點：

選擇器相同，則執行層疊性

選擇器不同，則根據選擇器權重執行

選擇器權重：

特點：

繼承的權重為0，如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0

權重疊加：如果是複合選擇器，則會有權重疊加，需要計算權重。權重雖然會疊加，但永遠不會有進位

相關焦點

  • 全面掌握CSS基本知識點
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }複製代碼css3的 position答案解析說一下css3的選擇器有那些，以及優先級答案解析：css的選擇器有：標籤、類、ID、全局、組合、後代、兄弟、偽類、偽元素選擇器。
  • 什麼是css,css選擇器簡介
    什麼是CSScss是 Cascading（層疊 ）Style（樣式） Sheet（表）的簡稱，及層疊樣式表，CSS技術用來美化html頁面，html相當於蓋房子，CSS相當於裝修，使用CSS可以把樣式代碼和html分離
  • CSS常考知識點
    常用的選擇器按優先級從高往低分別是：ID選擇器（優先級最高，一般用於定義容器骨架，很少用於樣式選擇）類選擇器（class selectors） (例如.example)、屬性選擇器（attributes selectors）（例如[type="radio
  • Meta CSS框架發布
    隨著代碼量變大，css將會變得越來越難維護。當你需要修改一個按鈕風格的時候，所有同樣風格的按鈕都要改過。你copy到那裡，哪裡就得改，很容易遺漏。並且代碼量也會相對更大，很多可重複利用的資源沒有利用起來。　　2.利用css層級覆蓋來實現。利用css選擇符的優先級來覆蓋是很好的做法，也是很常用的做法。
  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中，font-family屬性是使用來規定元素的字體系列，把多個字體名稱作為一個「回退」系統來保存，如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表，瀏覽器會使用它可識別的第一個值。有兩種類型的字體系列名稱：指定的系列名稱：具體字體的名稱，比如："times"、"courier"、"arial"。
  • 10個驚人的復古CSS套件
    NES.cssNES-style(8bit-like)的CSS框架，非常適合您的復古瀏覽器遊戲。https://nostalgic-css.github.io/NES.css/RPG UIWeb中用於老式RPG GUI的輕量級純CSS框架;包括按鈕，複選框，
  • Python零基礎入門教程,面向對象有哪三大特性?
    大綱（面向對象的三大特性）封裝性繼承性多態性封裝性封裝隱藏了對象的屬性和方法內部實現細節，僅對外提供公共訪問方式，類的內部可以訪問，外部不可以訪問。子類擁有父類的全部屬性和方法，稱為子類繼承父類。繼承性繼承實例演示
  • 明日方舟精二優先級排行 幹員精二優先級排名
    明日方舟中幹員精英二的優先級是非常重要的，本次就為大家帶來了明日方舟精二優先級排行，也是幹員精二優先級排名，非常詳細的內容，還不了解6星幹員先精英二誰的朋友可以參考，希望能幫到大家。
  • 13個最常用的CSS和HTML快速開發工具 - OSCHINA - 中文開源技術...
    2）SassSass令CSS又有趣起來，它對CSS3進行了擴展，增加了嵌套規則、變量、混入、選擇器繼承等語法，可以使用命令行工具或網絡框架插件，將其轉化為良好格式的標準 8）HSSHSS是個擴展了CSS語法的工具，擁有強大的特性，例如：變量、嵌套塊。
  • 10 個加速 CSS 開發的框架 - OSCHINA - 中文開源技術交流社區
    Sass 擴展了 CSS3，增加了規則、變量、混入、選擇器、繼承等等特性。Sass 生成良好格式化的 CSS 代碼，易於組織和維護。這是 PHP 愛好者的框架，提供最小化的語法、自動的 gzip 壓縮以及多css文件的合併，修復跨瀏覽器支持問題等。 Switch CSS
  • 【3D印表機原理】(一)層疊截面
    【相關新聞】 米蘭國際燈飾展：LED照明正從技術開發回歸對造型設計的追求 【蘋果描繪的未來】壓力傳感器拓展手勢操作的可能性 【生物塑料】（1）部分特性已超越傳統石油樹脂 3D Systems推出支持600萬種顏色的全彩3D印表機
  • 前端工程化(ES6模塊化和webpack打包css,less,scss,圖片,字體...
    伺服器端模塊化規範/* CommonJS 1.模塊分文單文件模塊與包 2.模塊成員導出: module.exports和exports 3.模塊成員導入: require('模塊標識符')*/ES6模塊化在ES6模塊化規範之前,Javascript社區已經嘗試並提出了AMD,CMD,CommonJS等模塊化規範.但是,這些社區提出的模塊化標準還是存在一定的差異性與局限性
  • 最強蝸牛裝備合成優先級介紹
    最強蝸牛裝備合成優先級介紹，什麼裝備值得我們率先去合成和安排呢，一起來看看本期攻略，關於遊戲中最能夠發揮玩家們氪金和輸出能力的裝備，大家一定不會陌生，相比浩如星海裝備庫我們能夠得到的屈指可數，來看看具體什麼裝備比較好用，什麼裝備值得先合成吧！
  • 常見的CSS文字居中顯示
    和vertical-align html<div> <span>測試文字</span></div>css實現水平垂直居中顯示 html<div> <span>測試文字測試文字測試文字測試文字</span></div>css
  • CSS之定位一(position屬性)
    圖1：relative子元素位置變化圖1中外框和除position屬性值不一樣外，其他css屬性均一致，其內外框html和相同部分css見圖2。圖2：內外框html和相同部分cssabsolute表示絕對位置，其在文檔流中不佔空間，其參考對象是離該元素最近的position值不是static的父元素。由圖3可以看出。
  • 用css配合HTML代碼製作導航條下拉麵板
    首先我們來看看下拉麵板的效果吧，這個事稍微複雜一點的下拉麵板，我們會一步步為您講解，如何製作出這樣一個下拉麵板，但前提是你需要了解CSS的定位知識和HTML代碼，因此沒有這些基礎的同學要先學一下HTML代碼和CSS（層疊樣式表）的知識。
  • HTML5+CSS+JS時間
    html,外觀修飾美觀與否就和css有關了,當然JS可能用的更多,再就是還可能用到css,js設計的框架.功能的多寡,比如造型酷炫,動態特效,多半都是JS來實現的,這裡我寫了一個博客的登錄界面(沒有設密碼,界面綠色按鈕就能進入博客,進入後用的java來實現的時間流動),圖片什麼的因為是別人的這裡就不上了,先上原始碼,我寫的代碼很簡單很容易應該就能看懂.
  • 最強蝸牛裝備合成優先級攻略配圖 裝備合成表最新優先級
    最強蝸牛裝備合成優先級是我們合成裝備時的重要參考，在12月新版本中，哪些裝備最值得優先合成呢？這裡就按照最強蝸牛武器合成價值收益來排名，一起來看看最強蝸牛裝備合成優先級最新攻略吧。
  • 最強蝸牛裝備合成優先級配圖大全:裝備合成優先級表最新一覽[多圖]
    最強蝸牛哪些裝備最優先合成？最強蝸牛武器在哪裡爆？每一把武器都有自己特殊的技能跟攻擊特性。不同的裝備拿在手上獲得的收益也不同。下面就把最強蝸牛按照武器最有價值收益最大化來排名。下面就是武器優先級圖標。最強蝸牛裝備合成優先級配圖大全1.
  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    本篇文章我們主要給大家說一下css的定位。css的定位是我們以後網頁製作中比較常用的屬性，也是很重要的知識點。了解各個定位的作用以及層級關係對以後的頁面布局至關重要。css定位主要有四種，靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式，不能使用top，bottom，left，right和z-index屬性，其它三種定位可以使用以上幾個屬性。我們這裡主要介紹後邊的這三個定位。