HTML标签嵌套必须规范化！！（html与css设置样式的大坑）

问题描述：在设置下图的span元素，css样式并没有生效，（原本还对自己的 后代选择器和子代选择器知识 有点不自信，特意又看了下这两个选择的文档，并没错。）问了两个大佬，终于得到了答案就是

html标签嵌套规范不符合规则（刚开始我也纳闷，....直到改了代码。确实需要注意这个问题。）

问题截图：（CSS样式的写法没有问题：）

出错原因：

 

解决办法：

规范化标签嵌套，使得p标签规范化。

这样就有效果了：

总结：

    针对该问题，p标签只能嵌套内联元素。反思其它标签，总结如下：（引用部分博客主的总结：https://www.cnblogs.com/xiyangbaixue/p/4090511.html）

1. 块级元素与块级元素平级、内嵌元素与内嵌元素平级 
   

   <div><span></span><p></p></div>  //span是行内元素，p是块级元素，所以这个是错误的嵌套

   <div><span></span><a></a></div>  //对的

2. 块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素
   

   <div><span></span></div>

   <span><span></span></span>

3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素

   h1、h2、h3、h4、h5、h6、p、dt

4. 块级元素不能放在标签p里面
   
   
5. li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器