CSS學習筆記(一)-9.CSS三大特性
阿新 • • 發佈：2021-07-12
CSS三大特性：層疊性,繼承性，優先順序。
一、層疊性。
相同的選擇器設定同屬性的樣式，值不同。即發生樣式層疊衝突。
因此，CSS的原則是：哪個樣式離元素最近，就展示哪個樣式。
對於這段程式碼，顯示的就是red顏色。
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 20:03:28 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 20:09:19 7 * @Description:View Code8 * @FilePath: \css\31-css三大特性.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0">17 <title>層疊性</title> 18 <style> 19 div { 20 color: pink; 21 font: 15px; 22 } 23 24 div { 25 color: red; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div>我來測試層疊特性</div> 32 </body> 33 34 </html>
僅對有衝突的元素有這個特性。所以font屬性不衝突。
二、繼承性
2.1文字樣式的繼承
子籤會繼承父標籤的樣式，主要是文字顏色、大小。主要是（text-,font-,line-,color等屬性）
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 20:12:14 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 20:12:48 7 * @Description: 8 * @FilePath: \css\32css三大特性--繼承.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>css三大特性--繼承</title> 18 <style> 19 div { 20 color: red; 21 } 22 </style> 23 </head> 24 25 <body> 26 <div> 27 <p>我是子標籤，繼承父標籤的樣式</p> 28 </div> 29 </body> 30 31 </html>View Code
但是內外邊距不會繼承。
2.2 行高的繼承
父元素的font這麼寫： font: 12px/1.5;
行高沒有寫px,表示1.5倍。
如果此時子元素有文字大小的樣式，那麼子元素的行高為子元素的文字大小*1.5倍行高。
如果此時子標籤沒有指定文字大小樣式，那麼子標籤的行高為父標籤的文字大小*1.5倍。
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 20:12:14 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 20:26:32 7 * @Description: 8 * @FilePath: \css\32css三大特性--繼承.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>css三大特性--繼承</title> 18 <style> 19 body { 20 font: 12px/1.5 "Microsoft YaHei" 21 } 22 /* /* div的行高為14px*1.5 = / */ 23 24 div { 25 font-size: 14px; 26 } 27 28 span { 29 font-size: 15px; 30 } 31 </style> 32 </head> 33 34 <body> 35 <!-- div的行高為div的文字大小*1.5 --> 36 <div>我是一個div</div> 37 <!-- span的行高為span的文字大小*1.5 --> 38 <span>我是一個span</span> 39 <!-- p的行高為繼承父的12px*1.5 --> 40 <p>我是一個P</p> 41 </body> 42 43 </html>View Code
三、優先順序
3.1 選擇器權重如下圖：
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 20:32:07 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 20:36:41 7 * @Description: 8 * @FilePath: \css\選擇器權重.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>選擇器權重</title> 18 <style> 19 .div1 { 20 color: red; 21 } 22 23 div { 24 color: pink !important; 25 } 26 27 #demo { 28 color: green; 29 } 30 </style> 31 </head> 32 33 <body> 34 <div class="div1" id='demo' style="color:purple"> 35 選擇器的權重 36 </div> 37 </body> 38 39 </html>View Code
3.2 子標籤繼承的權重永遠是0
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 20:32:07 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 20:58:03 7 * @Description: 8 * @FilePath: \css\選擇器權重.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>選擇器權重</title> 18 <style> 19 #father { 20 color: red!important; 21 } 22 23 p { 24 color: pink; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div id='father'> 31 <p>子標籤是p</p> 32 </div> 33 </body> 34 35 </html>View Code
以上程式碼，即使p的父標籤div的樣式是！important,對於p來說，權重始終是0.因此p顯示的樣式為p元素選擇器的樣式。
3.3 a標籤
由於瀏覽器給a一個隱藏樣式，導致a的父標籤的樣式對a不器作用。
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 20:32:07 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 21:01:23 7 * @Description: 8 * @FilePath: \css\選擇器權重.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>選擇器權重</title> 18 <style> 19 #father { 20 color: red!important; 21 } 22 23 p { 24 color: pink; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div id='father'> 31 <p>子標籤是p</p> 32 </div> 33 <!-- 瀏覽器給a單獨寫了一個樣式a {color:blue} --> 34 <a href="#">我的樣式</a> 35 </body> 36 37 </html>View Code
3.4 複合選擇器權重疊加
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 20:32:07 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-12 21:10:44 7 * @Description: 8 * @FilePath: \css\選擇器權重.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>選擇器權重-複合選擇器-權重疊加</title> 18 <style> 19 /* 權重：0,0,0,1 */ 20 21 li { 22 color: red; 23 } 24 /* 權重：0,0,0,1+0,0,0,1 = 0,0,0,2 */ 25 26 ul li { 27 color: purple 28 } 29 /* 權重：0,0,1,0 + 0,0,0,1 = 0,0,1,1 */ 30 31 .nav li { 32 color: pink; 33 } 34 /* 以上權重0,0,1,1權重最大，因為會從左往右比較 */ 35 </style> 36 </head> 37 38 <body> 39 <ul class='nav'> 40 <li>invoker</li> 41 <li>pudge</li> 42 <li>void</li> 43 </ul> 44 </body> 45 46 </html>View Code
參照以上的權重表格來計算權重，元素疊加權重，疊加結果從左到右來比較權重。
本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/15003986.html