Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

关于模块自嵌套

  「自嵌套」是个很奇怪的概念,虽然 HTML/CSS 不能算是一种编程语言,但结构上的自嵌套可能比函数递归的自嵌套还难搞定。函数递归时我们总要给递归一个结束条件,而模块自嵌套完全是逻辑上的,这才是真正可怕的地方。我已经被自嵌套问题坑过无数次坑怕了。
  也许会有人认为自嵌套的情况离我们平时的用法太远了,完全不需要花时间去纠结这种问题。其实我们一直在用自嵌套,只是平时的业务对它没有太多需求,所以可能自己都不知道。从当年的表格布局开始就存在了表格嵌套的问题,所以这是很有历史的东西了。只是在每个不同的时期人们遇到的具体问题不同而已。
  如果只以 TagName 为单位,那到处都是自嵌套。比如两个嵌套的 DIV 标签就可以理解为自己嵌套自己,因为写样式的时候实际上无论 DIV 的嵌套方式如何,它都是 DIV。比如下面的代码就是一个嵌套的 DIV,但它们具有不同的样式。 <style>
div { color: red; }
div div { color: green; }
</style>
<div>
  outer
  <div> inner </div>
</div>
  在一些奇怪的论坛上经常会看到一页页嵌套的回帖方式(虽然我很讨厌这个),这东西就是典型的模块自嵌套。下面这个例子就是类似的东西 <!DOCTYPE html>
<style>
html, body { width:100%; height:100%; margin:0; }
div { width:80%; height: 80%; border: 1px solid #ccc; }
</style>
<div><div><div><div><div><div><div>
   test
</div></div></div></div></div></div></div>
  如果最外层模块和内部的所有模块都使用同样的样式,那确实没什么问题,正常使用就行了。但实际上业务总是会有各种奇怪的需求,比如让某一层嵌套显示出特殊的样子,虽然加一个 class 就能解决问题,但要是使用后代选择器的话就可能有更深远的影响。这个问题的一个典型是 UL/OL/LI 结构的自嵌套。为某个层次的列表设置样式后需要考虑样式对后代元素的影响。不仅是后代选择器,甚至 CSS 本身的继承机制也会影响到后代元素。
  除了 UL/OL/LI 结构外,还有 DL/DT/DD 结构也经常受到自嵌套的困扰。我自己就经常使用全局的 DL/DT/DD 结构布局,比如 <style>
.section {}
.section-body {}
.home-banner .section-body {  }
</style>
<dl class="section  home-banner">
  <dt></dt>
  <dd class="section-body">
    ···
  <dd>
</dl>
  这个代码本身没有问题,但如果在 DD 中又嵌入了 DL/DT/DD 结构的话,DD 的样式可能受到外层 DD 的影响。
  对于以上这些问题我的建议是,在可能存在自己嵌套的结构中,避免直接使用后代选择器,可以使用子选择器代替。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^