-html 嵌套规范注意点

1-1块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等；但是，p标签中不要嵌套div标签，p，h,等块级标签；

1-2-a标签内可以嵌套任意元素，但是，a标签不能嵌套a标签；

2-注意点

2-1大标签嵌套小标签。是父子；

2-2块级嵌套行内

p标签不能嵌套嵌套h1~h6；

h1~h6不能嵌套p标签

一个段落，一个是标题；

3-1-1测试 p标签不能嵌套div；代码截图：

3-1-2 浏览器显示：

小结，右键检查，显示浏览器自动闭合了两个p标签，强制不准p标签嵌套h1和div标签；

3-2-1 p标签嵌套其他标签，比如

span,b,strong,i,em,s,del,u,ins,ins,small,big,sub,sup;

3-2-2 测试代码截图：

浏览器截图：

对比不嵌套图片和代码：

小结，嵌套标签后浏览器显示正常，检查图如下；检查后，未发现强制闭合标签；

4-1 测试a标签,a标签不能嵌套a标签;

代码截图：

浏览器显示和浏览器检查截图：

小结，当a标签嵌套a标签后，显示浏览器点击检查后，看到标签被强制闭合，使其不能被嵌套；

检查显示a标签嵌套h1,div标签时，显示正常；

4-2 测试a标签嵌套其他标签，代码和浏览器显示截图；

浏览器检查截图

小结，浏览器显示a标签嵌套后，文本显示正常，浏览器检查正常，无强制闭合；

a标签嵌套标签后，所有字体变成蓝色，点击后变色，并且，自带下划线；

a标签嵌套标签后，不会自动换行，需要添加br换行进行对比参照。

载说明：原创不易，未经授权，谢绝任何形式的转载

今天看了一篇国外的大佬关于“css嵌套语法”看法的文章，他认为这个语法是完全无用的垃圾，并收到众多网友的支持，在这里我将这个国外大佬的看法进行了整理，欢迎大家在评论区探讨。

国外大佬的看法

我真的很困惑，就像我对很多人盛赞的热门时尚废话一样，我不明白为什么有人能看到CSS嵌套的价值。在LESS/SASS/SCSS中，它只会使代码更加混乱，更难以跟踪和调试，总之，只会增加更多的步骤和考虑，而没有任何实际的好处。

但有趣的是，你会看到一些明显是为了让它看起来好看而堆叠的例子。你会看到一些垃圾代码，比如：

.nesting {
    color: hotpink;
    
    >.is {
        color: rebeccapurple;

    >.awesome {
            color: deeppink;
        }
    }
}

当你依赖制表符来保持事情的整洁时，必须不停地查找代码中实际应用的选择器/组合器规则...那么优势在哪里呢？

而且，如果你进入像实际的完整代码库这样的东西，它真的会崩溃。每个选择器字符串使用一个属性是堆叠的。现实世界中？即使是像菜单这样的小东西：

#mainMenu {

 ul {
 
  list-style:none;
 
  li {
   display:inline;
   
   a {
    display:inline-block;
    padding:0.5rem 1rem;
    color:var(--menuColor);
    border-radius:0.5rem;
    transition:background 0.3s, color 0.3s, scale 0.3s;
   }
   
   a:hover,
   a:focus {
    scale:1.2;
    background:var(--menuHoverBg);
    color:var(--menuHoverColor);
   }
   
  }
  
 }
 
}

当你理解伪状态时，如果没有试图在代码中找到那些内部的锚点而不是在整个代码并尝试弄清楚所有的缩进，你怎么知道它们在哪里？那不是清晰的代码！

相比之下：

#mainMenu ul {
 list-style:none;
}

#mainMenu li {
 display:inline;
}

#mainMenu a {
 display:inline-block;
 padding:0.5rem 1rem;
 color:var(--menuColor);
 border-radius:0.5rem;
 transition:background 0.3s, color 0.3s, scale 0.3s;
}
   
#mainMenu a:hover,
#mainMenu a:focus {
 scale:1.2;
 background:var(--menuHoverBg);
 color:var(--menuHoverColor);
}

这是一千倍更清晰的代码，因为你不必去寻找父选择器是什么！每个属性和值的组合都有完整的声明，说明它在哪里、是什么和如何应用的！规则越大，越多，就越是如此！

极简主义和字节痴迷之间有一种区别...后者闻起来像是“哇哇眼睛不想打字”的味道，这种情况下，也许应该考虑一下你是不是从事错误的业务。

尽管最热烈欢呼的人似乎是那些“在每个该死的元素上添加垃圾类”的傻瓜，那么他们从组合器或嵌套中得到了什么效用呢？

这就像他们在寻找LESS / SASS / SCSS这样的垃圾，以及为什么人们会寻找HTML / CSS框架的1997年实践的纪念碑一样。这表明他们对HTML的最基本用法以及CSS与HTML的区别一无所知。

它肯定不会提高代码的清晰度。

关于我的看法

以上是这位大佬的看法，以下是我对这个问题的看法，欢迎大家来探讨关于“css嵌套语法”的问题。

我认为这个问题并不是非黑即白的。CSS嵌套语法可以使代码更具可读性和易维护性，但如果过度使用，也可能会导致代码的冗长和可读性下降。

对于大多数项目来说，选择使用CSS嵌套语法还是不使用，应该取决于具体情况。在某些情况下，使用CSS嵌套语法可以使代码更加简洁和易于理解，而在其他情况下，使用它可能不那么合适。

那么如何选择呢，以下是我的一些建议：

1. 项目规模和复杂度：如果项目规模较小且样式较简单，使用CSS嵌套语法可能会增加代码的冗长和复杂度，反而降低了代码的可读性。但是，对于大型项目和复杂样式，使用CSS嵌套语法可以使代码更加结构化和易于管理。

2. 开发团队的技能水平：如果开发团队中的成员都熟悉CSS嵌套语法并且能够正确使用它，那么使用它可能会使开发更加高效。但是，如果团队中的成员不熟悉CSS嵌套语法或者误用它，那么可能会导致代码的错误和混乱。

3. 个人喜好和项目要求：有些开发人员喜欢使用CSS嵌套语法，因为它可以使代码更加优雅和易于阅读。但是，有些项目可能对代码的性能和可维护性有更高的要求，此时可以考虑不使用CSS嵌套语法。

总之，选择是否使用CSS嵌套语法应该根据项目的实际需求和开发团队的技术水平来决定。如果正确使用，它可以使代码更加优雅和易于维护，但是过度使用可能会导致代码的冗长和可读性下降。我们应该根据项目的实际需求和具体情况进行权衡和取舍，而不是一味地认为某种方法是完全无用的垃圾。

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。