CSS的优先级和继承性

1、优先级是指如果多个选择器作用于同一个元素时,CSS的处理规定;
2、对于优先级CSS总的原则是:越特殊的样式,优先级越高;
3、具体的说,优先级规则是:!important>行内样式>ID样式>类别样式>标记样式,可参考下图:


4、通过优先级规则我们可以知道:如果子元素定义的样式和父元素定义的样式冲突,则以子元素自己的样式为准;如果没有发生冲突,则子元素则继承父元素的样式风格;
5、特别的,继承来的样式的优先级要比元素具有的默认优先级低,如下面这个例子:

 1 <style type="text/css" >
 2 /*body标记选择器*/
 3 body{
 4     text-align: center;
 5     font-size: 12px;
 6     text-decoration: underline;
 7     }
 8 /*em标记选择器*/
 9 em{
10     font-weight: bold;
11     font-size:30px;
12     color: red;    
13     }
14 /*自定义了一个名为right的类选择器*/
15 .right{
16     text-align: right;
17     color: green;
18     font-weight: bold;
19     }
20 </style>
21 
22 <body>
23     <h2>重视大脑的学习指南</h2><!--因<h2>标记自己有关于字体大小的样式,所以没有继承<body>标记关于字体大小的12px规定-->
24     <p>网页设计之CSS</p><!--完全继承了父元素<body>选择器的样式-->    
25     <p><em>从零开始</em>学习网页设计</p><!--“从零开始”以自身的<em>标记选择器的样式为准,而“学习网页设计”继承了父元素<body>选择器的样式-->
26     <p class="right">CSS的优先性和继承性</p><!--自定义的样式选择器,优先级高于标记选择器-->
27 </body>
原文地址:https://www.cnblogs.com/roytanlu/p/2477575.html