父与子元素的背景色设置

最新推荐文章于 2023-02-13 09:19:31 发布

MelodyFreedom

最新推荐文章于 2023-02-13 09:19:31 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/MelodyFreedom/article/details/51981742

版权

1、如下代码

<div class="fatherdiv"style="background:red;height:200px;width:200px;">
     <div class="childrenDiv" style="backgound:blue;height:20px;width:20px;"></div>
</div>
两个div颜色均可以显示。
2、如下代码
  .fatherdiv{
      background:red;
      height:200px;
      width:200px;
  }
.childrenDiv{
         background:blue;
         height:20px;
         width:20px;
     }

<div class="fatherdiv">
     <div class="childrenDiv"></div>
</div>
两个div颜色也均可以显示。
3、如下代码 .fatherdiv{
      background:red;
      height:200px;
      width:200px;
  }
<div class="fatherdiv">
  <div class="childrenDiv" style="backgound:blue;height:20px;width:20px;"></div>
</div>
子div颜色不再显示
 


后经过查阅资料，发现，对元素的选择是有优先级的，其中
我们通常用1来表示标签名的优先级，用10来表示类选择器的优先级，用100来表示ID选择器的优先级，
比如.fatherDiv 的选择优先级为10，而div.fatherDiv 选择优先级为10 + 1；