一、繼承性
1、基本介紹
#1、定義：給某一個元素設定一些屬性，該元素的后代也可以使用，這個我們就稱之為繼承性
#2、注意：
1、只有以color、font-、text-、line-開頭的屬性才可以繼承
2、a標簽的文字顏色和下劃線是不能繼承別人的
3、h標簽的文字大小是不能繼承別人的，會變大，但是會在原來字體大小的基礎上變大
ps:打開瀏覽器審查元素可以看到一些inherited from，，，的屬性
#3、應用場景：
通常基于繼承性統一設定網頁的文字顏色，字體，文字大小等樣式
2、繼承性舉例
<!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>
二、層疊性
1、基本介紹
#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個標簽那么會有覆寫效果
#2、注意：
1、層疊性只有在多個選擇器選中了同一個標簽，然后設定了相同的屬性，
才會發生層疊性
ps：通過谷歌瀏覽器可以查看到，一些屬性被劃掉了
2、層疊性舉例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代選擇器</title> <style type="text/css"> p { color: red; } .ppp { color: green; } </style> </head> <body> <p class="ppp">我是段落</p> </body> </html>
三、優先級
#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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/61019.html
標籤：Html/Css