直奔主題，CSS的三大特性：繼承性，層疊性，優先級
一、繼承性作用： 給父元素設置的一些屬性，子元素和後代元素也有權使用
注意：并不是所有的屬性都能夠繼承，隻有color / font- / text- / line 開頭的屬性才可以繼承
例：
<style> div{ color: blueviolet; font-size: 20px; text-align: center; line-height: 20px; background-color: burlywood; } </style> </head> <body> <div> <span>我是span</span> </div> </body>
我為span的父元素div添加了color/font-size/line-height/text-align/background-color等樣式屬性，我們打開F12浏覽器開發者模式
我們可以看到Inherited from div 這句話 ， 它的意思是 從div繼承 ，并且除了background-color其它樣式屬性都是以高亮狀态顯示，證明了CSS的繼承隻有部分樣式可繼承
這裡給讀者們再提醒一句：a标簽的文字顔色與下劃線無法被繼承改變，h标簽的的文字大小也不能被繼承正确的改變。
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最适合2020年學習的web前端學習幹貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條号并在後台私信我：前端，即可免費獲取。
二、層疊性作用：處理樣式屬性沖突的一種解決方式，層疊性隻有在多個 選擇器選中“同一個标簽”然後又設置了“相同的屬性”才會出現咱們的層疊性
例：
<style> span{ color: cadetblue; } span{ color: chartreuse; } </style> </head> <body> <div> <span>我是span</span> </div> </body>
這裡我們選中到了span，并且設置了同一樣式屬性和兩種不同顔色
第一次設置的顔色被劃了一條橫線 ， 意味着第一次設置的顔色被第二次顔色給覆蓋了
那麼問題來了？浏覽器是根據什麼規則來選擇誰來覆蓋誰的樣式呢？
這就涉及到我們的下一個話題 ---->
三、優先級優先級的作用顯而易見：用來判斷如何層疊
個人總結了優先級的三種判斷方式
1.間接選中（間接選中就是繼承）
如果都是間接選中，誰離目标标簽近，樣式就聽誰的
<style> div ul{ color: blue; } div { color: red; } </style> </head> <body> <div> <ul> <li>CSS的優先級判斷</li> </ul> </div> </body>
通過繼承，間接選中li标簽,分别設置不同的字體顔色
浏覽器選擇從ul裡面繼承 ， 這是因為我們的 ul标簽 比 div标簽 更加靠近我們的li标簽
2.直接選中，但是是相同類型的選中器
這個結論很簡單，誰寫在後面樣式就聽誰的，直接看例子：
<style> .li{ color: blue; } .li{ color: yellow; } </style> </head> <body> <div> <ul> <li class="li">CSS的優先級判斷</li> </ul> </div> </body>
可以看到blue被yellow給層疊了,這是因為yellow寫在後面
3.直接選中，但是是不同類型的選擇器
直接說結論： id > 類 > 标簽 > 通配符 >浏覽器默認
<style> #li{ color: red; } .li{ color: blue; } li{ color: yellow; } </style> </head> <body> <div> <ul> <li class="li" id="li">CSS的優先級判斷</li> </ul> </div> </body>
看結果可知，隻有id選擇器活下來了 =.=
其它的讀者們可以下來再試一試..
其實，優先級問題還沒說完，接下來補充兩點：!important 和 權重
一、!important作用：用來提升某個直接選中标簽的選擇器中的某個屬性的優先級，可以将被指定的屬性提升到最高
注意！！！ !important 隻能用在直接選中身上！！！而且隻能提升某個屬性！！并非整個選擇器！！
<style> #li{ color: red; } .li{ color: blue !important; } </style> </head> <body> <div> <ul> <li class="li" id="li">CSS的優先級判斷</li> </ul> </div> </body>
根據剛剛所講 id >類 ，本來應該是id選中器中的屬性優先級高，一旦加了!important，結果就是...
當多個選擇器混合在一起使用時，需要通過計算權重來判斷優先級
那麼全重怎麼判斷呢！？
計算規則：看數量
id選擇器多的優先級 > 類名選擇器多的 > 标簽名數量多的
<style> #div #ul .li{ color: red; } #div .ul .li{ color: yellow; } .div .ul .li{ color: blue; } </style> </head> <body> <div class="div" id="div"> <ul class="ul" id="ul"> <li class="li" id="li">CSS的優先級判斷</li> </ul> </div> </body>
由于第一個id選擇器的數量多，所以表示為red
如果出現了 id選擇器數量 = 類名選擇器數量 = 标簽名數量 ，就不會繼續計算權重了
而是誰寫在後面樣式就聽誰的
原文鍊接：https://juejin.im/post/6875520020642791437
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
