继承
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>CSS的继承性</title> 6 ????<style> 7 ????????.father { 8 ????????????color:red; 9 ????????}10 ????</style>11 </head>12 <body>13 ????<!--继承：给父级设置属性,子级继承父级的一些属性 比如 color font-* text-* line-*14 ????像一些盒子元素，定位元素(浮动,绝对定位,固定定位)不能继承-->15 ????<div class="father" id="李靖">16 ????????<p>哪吒</p>17 ????</div>18 </body>19 </html>
权重比较
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????/*id=100>class=10>标签=1* 按顺序比较,先比较id,再比较类,最后比较标签,只要前面的大,后面就不比较了/ 8 ????????/*2个id1个标签:201*/ 9 ????????#box1 #box2 p {10 ????????????color:red;11 ????????}12 ????????/*1个id 1个类 1个标签:111*/13 ????????#box2 .wrap3 p {14 ????????????color:green;15 ????????}16 ????????/*1个id 3个标签:103*/17 ????????div div #box3 p {18 ????????????color:yellow;19 ????????}20 ????????/*3个类 4个标签:34*/21 ????????div.wrap1 div.wrap2 div.wrap3 p {22 ????????????color: blue;23 ????????}24 ????</style>25 </head>26 <body>27 28 ????<div id="box1" class="wrap1">29 ????????<div id="box2" class="wrap2">30 ????????????<div id="box3" class="wrap3">31 ????????????????<p>什么颜色</p>32 ????????????</div>33 ????????</div>34 ????</div>35 </body>36 </html>
层叠
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>层叠性</title> 6 ????<style> 7 ????????#box { 8 ????????????color:red; 9 ????????}10 ????????.container {11 ????????????color:yellow;12 ????????}13 ????????/*!important 设置权重无限大,不影响继承来的属性,只影响选中的属性*/14 ????????p {15 ????????????color:teal!important;16 ????????}17 18 ????????ul {19 ????????????color:red;20 ????????}21 22 ????????.list {23 ????????????color:yellow!important;24 ????????}25 ????</style>26 </head>27 <body>28 ????<!--层叠性:权重大的标签样式覆盖掉了权重小的标签样式,当权重相同时,以后设置的为准,但是继承来的属性权重为0.如果都是继承来的属性,就看29 ????谁描述的近就显示谁的样式,都一样近,就看权重大小.30 ????权重:谁的权重大,浏览器就会显示谁的属性31 ????-->32 ????<p id="box" class="container">33 ????????什么颜色34 ????</p>35 36 ????<div class="list">37 ????????<ul>38 ????????????<li>39 ????????????????li标签40 ????????????</li>41 ????????</ul>42 ????</div>43 </body>44 </html>
css的继承以及层叠
原文地址：https://www.cnblogs.com/Nopeeee/p/10028360.html