css的三大特性繼承性，層疊行，優先級
阿新 • • 發佈：2018-09-24
並且 img 分享 指定 作用 important 通配 技術 text 
1、繼承性
#1、定義：給某一個元素設置一些屬性，該元素的後代也可以使用，這個我們就稱之為繼承性 #2、註意： 1、只有以color、font-、text-、line-開頭的屬性才可以繼承 2、a標簽的文字顏色和下劃線是不能繼承別人的 3、h標簽的文字大小是不能繼承別人的，會變大，但是會在原來字體大小的基礎上變大 ps:打開瀏覽器審查元素可以看到一些inherited from。。。的屬性 #3、應用場景： 通常基於繼承性統一設置網頁的文字顏色，字體，文字大小等樣式
<!DOCTYPE html> <html lang="示例en"> <head> <meta charset="UTF-8"> <title>後代選擇器</title> <style type="text/css"> div { color: red; font-size: 50px; } </style> </head> <body> <div> <h1>我是標題</h1> <p><a href="#">偶的博愛</a></p> <ul> <li>導航1</li> <li>導航2</li> <li>導航2</li> </ul> </div> <div> <div> <p>aaaa</p> </div> <div> <p>bbbb</p> </div> </div> </body> </html> 示例
2、層疊性
#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個標簽那麽會有覆蓋效果 #2、註意： 1、層疊性只有在多個選擇器選中了同一個標簽，然後設置了相同的屬性， 才會發生層疊性 ps：通過谷歌瀏覽器可以查看到，一些屬性被劃掉了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p{ color: red; } .ppp{ color: green; } </style> </head> <body> <p class="ppp">我是段落</p> </body> </html>示例
3、優先級
#1、定義：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定 #2、優先級 整體優先級從高到底：行內樣式>嵌入樣式>外部樣式 行內樣式並不推薦使用，所以我們以嵌入為例來介紹優先級
1、大前提：直接選中 > 間接選中(即繼承而來的)
#1、以下為直接選中 <style type="text/css"> #id1 { color: red; } .ppp { color: green; } p { color: blue; } </style> #2、以下為間接選中 <style type="text/css"> ul { color: yellow; } </style> <ul> <li> <p id="id1" class="ppp">我是span</p> </li> </ul>實列
2、如果都是間接選中(繼承)，那麽誰離目標標簽比較近，就聽誰的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後代選擇器</title> <style type="text/css"> /*離目標近*/ li { color: red; } /*離目標遠*/ ul { color: yellow; } </style> </head> <body> <ul> <li> <p id="id1" class="ppp">我是span</p> </li> </ul> </body> </html>示例
3、如果都是直接選中，並且都是同類型的選擇器，那麽就是誰寫的在後面就聽誰的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後代選擇器</title> <style type="text/css"> p { color: red; } /*同樣都是標簽選擇器，誰寫在後面誰生效*/ p { color: yellow; } </style> </head> <body> <ul> <li> <p id="id1" class="ppp">我是span</p> </li> </ul> </body> </html>示例
4、如果都是直接選中，並且是不同類型的選擇器，那麽就會按照選擇器的優先級來層疊
id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後代選擇器</title> <style type="text/css"> /*打開瀏覽器依次去掉優先級高的來進行驗證*/ #id1 { color: red; } .ppp { color: green; } p { color: blue; } * { color: yellow; } li { color: #7e1487; } </style> </head> <body> <ul> <li> <p id="id1" class="ppp">我是span</p> </li> </ul> </body> </html>示例
5、優先級之!important
#1、作用：還有一種不講道理的!import方式來強制指定的屬性的優先級提升為最高，但是不推薦使用。因為大量使用!import的代碼是無法維護的。 #2、註意： 1、!important只能用於直接選中，不能用於間接選中 2、!important只能用於提升被指定的屬性的優先級，其他屬性的優先級不會被提升 3、!important必須寫在屬性值分號的前面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後代選擇器</title> <style type="text/css"> /*打開瀏覽器依次去掉優先級高的來進行驗證*/ #id1 { color: red; } .ppp { color: green; } p { color: blue; } * { color: yellow !important; } li { color: #7e1487; } </style> </head> <body> <ul> <li> <p id="id1" class="ppp">我是span</p> </li> </ul> </body> </html>示例
6、優先級之權重計算
#1、強調 如果都是直接選中，並且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級 #2、計算方式 #1、id數多的優先級高 #2、id數相同，則判定類數多的優先級高 #3、id數、class數均相同，則判定標簽數多的優先級高 #4、若id數、class數、標簽數均相同，則無需繼續往下計算了，誰寫在後面誰的優先級高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後代選擇器</title> <style type="text/css"> #id1 #id2 #id3 .ppp{ color: red; } #id2 #id3.aaa p{ color: purple; } #id1.ccc>.bbb>.aaa>p { color: pink; } #id1 .aaa .ppp { color: green; } #id2 .aaa p { color: yellow; } div ul li p { color: blue; } div ul p { color: cyan; } </style> </head> <body> <div id="id1" class="ccc"> <ul id="id2" class="bbb"> <li id="id3" class="aaa"> <p class="ppp">我是段落</p> </li> </ul> </div> </body> </html>示例
css的三大特性繼承性，層疊行，優先級