1.样式的继承
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <!-- 12 祖先元素的样式会被他的后代继承 13 利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将自动继承这些样式 14 15 但是并不是所有的样式都会被子元素所继承，比如 背景相关，边框相关，定位相关的样式都不会被继承 16 --> 17 <p style="font-size: 30px;"> 18 abc1 19 <span>abc2</span> 20 </p> 21 <span>abc3</span> 22 <div style="background-color: aqua;"> 23 <p> 24 abc4 25 <span>abc5</span> 26 </p> 27 </div> 28 </body> 29 </html>
2.选择器的继承
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .p1{ 8 background-color: yellow; 9 } 10 p{ 11 background-color: red; 12 } 13 #p2{ 14 background-color: yellowgreen; 15 } 16 p#p2{ 17 background-color: aquamarine; 18 } 19 *{ 20 font-size: 50px; 21 } 22 p{ 23 font-size: 10px; 24 } 25 /* 26 当使用不同的选择器，选中同一个元素时并且设置相同的样式时， 27 这时样式之间产生了冲突，由选择器的优先级（权重）决定， 28 优先级高的优先显示 29 1.优先级的规则 30 内联样式 优先级 1000 <p style="background-color: aqua;"> 31 id选择器 优先级 100 id="p2" 32 类和伪类 优先级 10 .p1 33 元素选择器 优先级 1 p 34 通配* 优先级 0 * 比继承优先级要高 35 36 2.当选择器中包含多种选择器时，需要将多种选择器的优先级相加后再比较 37 但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级的一样 38 则使用靠后的样式 39 40 3.并集选择器的优先级是单独计算 41 div p #p1 hello{} 42 43 4.可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级 44 将会优先于所有的样式显示，甚至超过内联样式，但是在开发中避免使用!important，不方便后期维护 45 */ 46 </style> 47 </head> 48 <body> 49 <p id="p2" class="p1" style="background-color: aqua;">123</p> 50 <p id="p2" class="p1">123</p> 51 <p class="p1">123</p> 52 <p> 53 <div> 54 123 55 </div> 56 </p> 57 </body> 58 </html>
3.伪类的优先级
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 a:link{ 8 color: aqua; 9 } 10 a:visited{ 11 color: cadetblue; 12 } 13 a:hover{ 14 color: aquamarine; 15 } 16 a:active{ 17 color: blanchedalmond; 18 } 19 /* 20 涉及到a的伪类一共有四个： 21 :link 22 :visited 23 :hover 24 :active 25 而这四个选择器的优先级是一样的 26 写在下面的可以把写在上面的覆盖掉 27 */ 28 </style> 29 </head> 30 <body> 31 <a href="http://www.baidu.com.cn">访问过的链接</a> 32 <br /> 33 <a href="http://ww.baidu.com.cn">未访问过的链接</a> 34 </body> 35 </html>