css入门【5】-继承性和层叠性

1.继承性

层叠式的一个特性-继承性：后代元素会继承来自祖先元素的文字的样式，不能继承盒子的样式。可以将整体的文字样式写在最祖先元素body，后面的标签自动继承。

.box{
       width:300px;
       height:300px;
       background:pink;
       border:5px solid black;
       font-size:16px;
       color:blue;
       font-weight:bold;
   }

 <div class="box">   
      <h2>这里是标题</h2>
      <p>这里是段落</p>
      <p>这里是段落</p>
  </div>

2.层叠式

当多个选择器选择一个元素，相同的样式取决于哪个选择器？这就涉及到权重问题。权重高的会替换掉权重低的。
id选择器>类选择器>标签选择器>通配符

 #demo{
       color:blue;
   }
   div{
       color:red;
   }
   .box{
       color:green;
   }
   
   <div class="box" id="demo">   
      <h2>这里是标题</h2>
      <p>这里是段落</p>
      <p>这里是段落</p>
  </div>

最后字体颜色是蓝色。
高级选择器的权重：数基础选择器的个数，依次比较id个数>类的个数>标签的个数

 .box1 .box2 .box3 p{//三个类选择器
       color:red;
   }
   .box1 #box2 p{//一个类选择器，一个id选择器，一个标签选择器
       color:blue;
   }
   .box1 .box2 #box3 p{//两个个类选择器，一个id选择器，一个标签选择器
       color:green;
   }

<div class="box1" id="box1">
     <div class="box2" id="box2">
         <div class="box3" id="box3">
             <p>这是一段文字</p>
         </div>
     </div>
 </div>

最后p里面的文字显示为绿色。
如果有并集，计算器权重时单独拆开计算。

.box1 .box2 .box3 p{
       color:red;
   }
   .box1 #box2 p,.box4 p{
       color:blue;
   }
   .box1 .box2 #box3 p{
       color:green;
   }

<div class="box1" id="box1">
     <div class="box2" id="box2">
         <div class="box3" id="box3">
             <p>这是一段文字</p>
         </div>
     </div>
 </div>
 <div class="box4">
         <p>这又是一段文字</p>
 </div>

（显示结果第一段文字是绿色，第二段是蓝色，也就是上列代码等价于）

.box1 .box2 .box3 p{
       color:red;
   }
   .box1 #box2 p.box4 p{
       color:blue;
   }
   .box1 .box2 #box3 p{
       color:green;
   }
   .box4 p{
    color:blue;
   }

如果权重一样，遵循后来居上的原则，也就是写在后面的样子覆盖写在前面的样式。

 .box1 .box2 .box3 p{
       color:red;
   }
   .box1 .box2 .box3 p{
       color:blue;
   }
   .box1 .box2 .box3 p{
       color:green;
   }

最后段落颜色是绿色。

如果没选中元素，样式靠继承。
继承离自己最近的祖先的样式。

.box1 {
       color:red;
   }
    .box2 {
       color:blue;
   }
    .box3 {
       color:green;
   }

最后段落颜色为绿色。
如果距离相同，再比较权重

.box1 #box2 .box3{
       color:red;
   }
    .box2 .box3{
       color:blue;
   }
    .box3 {
       color:green;
   }
<div class="box1" id="box1">
     <div class="box2" id="box2">
         <div class="box3" id="box3">
             <p>这是一段文字</p>
         </div>
     </div>
 </div>

此时文字显示为红色。
如果距离相同，权重相同，遵循后来居上的原则。

关键字 !important
给单一属性添加，给这个属性添加到最大。
但是不适用于就近原则。

 .box1 #box2 .box3{
       color:red !important;
   }
   .box1 #box2 .box3{
       color:blue;
   }
   .box1 #box2 .box3{
       color:green;
   }

此时文字显示红色

 .box1 #box2 .box3{
       color:red !important;
   }
   .box1 #box2 .box3{
       color:blue;
   }
   .box1 #box2 .box3{
       color:green;
   }

此时文字显示绿色，也就是的确对就近原则权重>！important