html设置样式不继承_web前端入门到实战：css的核心原理分为优先级原则与继承原则两大部分...
生活随笔
收集整理的這篇文章主要介紹了
html设置样式不继承_web前端入门到实战：css的核心原理分为优先级原则与继承原则两大部分...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css原理：1.優先原則=>后解析的內容會覆蓋之前解析的內容（所謂解析就是讀取的css樣式）2.繼承原則=>嵌套里面的標簽擁有外部標簽的某些樣式，子元素可以繼承父元素的屬性
1》優先原則針對選擇器：a.同一個選擇器從上往下讀取執行css樣式 b.同一類選擇器從上往下執行 c.不同類型的選擇器優先級，先執行低優先級再執行高優先級，比方基本選擇器就是從*通配符<標簽div<class選擇器<id選擇器 d.外部樣式與內部樣式合并之后再一起執行，根據從上往下執行順序讀取 e.內聯樣式也就是行內樣式是最后執行的 f.加了！important字段是最后執行的
2》繼承原則：2.1跟文字樣式相關的可以被繼承/其他的不能繼承 2.2塊級元素的寬度如果不設置會繼承父元素的寬度，高度取決于它的內容
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>css的核心原理分為優先級原則與繼承原則兩大部分</title>7 <!-- 優先原則針對選擇器：a.同一個選擇器從上往下讀取執行css樣式 8 b.同一類選擇器從上往下執行 c.不同類型的選擇器優先級，先執行低優先級再執行高優先級，比方基本選擇器就是從*通配符<標簽div<class選擇器<id選擇器 9 d.外部樣式與內部樣式合并之后再一起執行，根據從上往下執行順序讀取 e.內聯樣式也就是行內樣式是最后執行的 f.加了！important字段是最后執行的 --> 10 <style type="text/css"> 11 div{ 12 /* color:#f90; */ 13 color:#f90 !important; 14 } 15 /* div{ 16 color:red; 17 } 18 .box1{ 19 color: yellowgreen; 20 } 21 #box2{ 22 color: violet; 23 } */ 24 </style> 25 <link rel="stylesheet" href="demo2.css"><!--新建demo2.css,文件內容div{color: blue;}--> 26 </head> 27 <body> 28 <!-- <div class="box1" id="box2">我想起那天下午在夕陽下的奔跑,那是我逝去的青春</div> --> 29 <div style="color: skyblue;">我想起那天下午在夕陽下的奔跑,那是我逝去的青春</div> 30 </body> 31 </html>從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端HTML5的項目實戰【視頻＋工具＋系統路線圖】都有整理，在線解析，學習指導，點：【WEB前端學習圈⑤】
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的html设置样式不继承_web前端入门到实战：css的核心原理分为优先级原则与继承原则两大部分...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 8 排序_一遍记住 8 种排序
- 下一篇： html试题及答案,HTML试题及答案