CSS中的樣式覆蓋原則
規則一：由於繼承而發生樣式衝突時，最近祖先獲勝（最近原則）。
CSS的繼承機制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況：
<html> <head> <title>rule 1</title> <style> body {color:black;} p {color:blue;} </style> </head> <body> <p>welcome to <strong>gaodayue的網路日誌</strong></p> </body></html>
strong分別從body和p中繼承了color屬性，但是由於p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍色。
規則二：繼承的樣式和直接指定的樣式衝突時，直接指定的樣式獲勝（最直接原則）。
在上面的例子中，假如還指定了strong元素的樣式，如：
strong {color:red;}
那麼根據規則二，strong中的文字最終顯示為紅色。
規則三：直接指定的樣式發生衝突時，樣式權值高者獲勝。
樣式的權值取決於樣式的選擇器，權值定義如下表。
css選擇器 權值
標籤選擇器 1
類選擇器 10
ID選擇器 100
內聯樣式 1000
偽元素(:first-child等) 1
偽類(:link等) 10
可以看到，內聯樣式的權值>>ID選擇器>>類選擇器>>標籤選擇器，除此以外，後代選擇器的權值為每項權值之和，比如”#nav .current a”的權值為100 + 10 + 1 = 111。
規則四：樣式權值相同時，後者獲勝。
考慮下面這種情況
<p class="byline">Written by <a class="email" href="mailto:[email protected] com">Jean Graine de Pomme</a></p>
.byline a {color:red;}p .email {color:blue;}
“.byline a”與”p .email”都直接指定了上面的a元素，且權值都為11，根據規則四，最終顯示藍色。
由於樣式表可以是外部的，也可以是內部的，規則四提醒我們要注意外部樣式表引入的順序（及<link>元素的順序），以及外部樣式表與內部樣式表的出現位置。一般來說，內部樣式表出現在所有外部樣式表的引入之後，一般是在</head>之前。
規則五：!important的樣式屬性不被覆蓋。
!important 可以看做是萬不得已的時候，打破上述四個規則的”金手指”。如果你一定要採用某個樣式屬性，而不讓它被覆蓋的，可以在屬性值後加上!important，以規則四的例子為例，”.byline a {color:red !important;}”可以強行使連結顯示紅色。大多數情況下都可以通過其他方式來控制樣式的覆蓋，不能濫用!important。
相關推薦
CSS 中樣式覆蓋優先順序
我們在日常開發，總會遇到樣式覆蓋問題。有時候修改後的樣式，並沒有根據自己的意願顯示出來。這裡就可能跟樣式覆蓋優先順序有關。 1、首先，層疊優先順序是 內聯樣式 > 內部樣式表 >
CSS中的樣式覆蓋原則
規則一：由於繼承而發生樣式衝突時，最近祖先獲勝（最近原則）。CSS的繼承機制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況：<html> <head> <title>rule 1</title> <style&
css中樣式的優先順序簡單總結
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"
css中樣式style的優先順序
css中樣式有一下幾種方式 <style> body { background-color: black; font-family: Monospace; color: green;
css全域性樣式覆蓋預設的樣式
@charset "utf-8"; /*全域性樣式*/ *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{border:0;} img,
css樣式表中的樣式覆蓋順序
精確 一個 avi 樣式 ren code spartan tor 怎樣 原文:css樣式表中的樣式覆蓋順序 有時候在寫CSS的過程中，某些限制總是不起作用，這就涉及了CSS樣式覆蓋的問題，如下 <!DOCTYPE html> <html
HTML中設定多個class屬性css的優先順序,css樣式覆蓋
https://blog.csdn.net/u011320646/article/details/18152857 https://www.w3cschool.cn/codecamp/overri
使用 jQuery 修改 css 中帶有 !important 的樣式屬性
wid tex jscript 使用 全部 保留 logs php color 外部樣式為： div.test { width:auto !important; overflow:auto !important } 通過 $("div.t
CSS中的路徑裁剪樣式clip-path
lan 對話框 保護 簡單 catalog nms 低版本 type mar 前面的話 CSS借鑒了SVG裁剪的概念，設置了clip-path樣式，本文將詳細介紹路徑裁剪clip-path 概述 clip-path屬性可以防止部分元素通過定義的剪切區域來
css中background合寫樣式
color chm ffffff rep position osi style over bsp body { background: url("img_tree.png") no-repeat fixed 50% 50%/cover #ffffff ; }等價於 bo
vue中使用v-html載入的富文字，css中定義樣式不生效
如題，使用v-html載入一段富文字，富文本里包含圖片，在手機上圖片寬度可能會溢位 <div v-html="htmlContent" class="rich"></div> <style scope> .rich>
css中字型與段落屬性設定/文字高階樣式
CSS中字型與段落屬性 毫無疑問，不管什麼網站，文字一定是必不可少。文字可以是網頁傳播資訊的主要手段。那麼怎麼顯示文字，才能更加的美觀，那麼大家需要了解以下文字屬性。 字型屬性 屬性 用途 語法（一些寫法）
如何javascript獲取css中的樣式
obj.style.height只能獲取行間樣式,但是我們要怎麼獲取寫在css檔案中的樣式呢? 方法/步驟 首先我們要用一個新的方法currentStyle.這個方法由current和style兩個單片語成意思是:目前的樣式.也就是載入css檔案後取出來的樣式. cu
css中字型單位與超連結樣式
設定字型大小位畫素 可以完全定死 h1 {font-size:40px;} 用em來設定字型的大小 來代替畫素px 1em和當前字型大小相等,在瀏覽器中預設的文字大小是16px 1em = 16px 可以通過如下公式將畫素轉為em px / 16 = em
(S)CSS中實現主題樣式的4½種方式 [譯]
原Slides: 4½ Methods for Theming in (S)CSS ; 作者: Harry Roberts PM說要實現一個一鍵設定主題的功能，作為技術，你能想到的實現方式有哪些呢？ 1. 什麼是主題樣式？ 相信大家對網頁的主題樣式功能肯定不陌生。對於一些站點，在基礎樣式上，開
CSS中如何設定連結樣式以及注意點
連結的四種狀態： a:link - 普通的、未被訪問的連結 a:visited - 使用者已訪問的連結 a:hover - 滑鼠指標位於連結的上方 a:active - 連結被點選的時刻 當為連
微信小程式 wxml wxss中使用的css 中的style樣式
微信小程式中使用的佈局還有樣式，使用到的是前端的 css css 的樣式可以寫在 style 裡面 屬性 width: fit-content; font-size:20px; /*設定文字字號*/ co
CSS中關於多個class樣式設定的不同寫法
html中： <div class="containerA"> 這是AAAAAAAAAAAAAAAAAAAAAAA樣式 <div class="containerB">
關於CSS中的樣式繼承
1. 所有元素可繼承：visibility和cursor。 2. 內聯元素可繼承（都是關於字型的一些樣式）：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-siz
如何在CSS中新增手機端（移動端）自適應樣式
通用手機端樣式： @media all and (orientation : portrait) { /*豎屏*/ } @media all and (orientation : landscape) { /*橫屏*/ } 指定手機端高度樣式： @medi