css - 此 CSS 用法是否适用于定位嵌套的 div？

Question

基本上只是想知道附加图像是否显示了有效的 CSS 用法？我最近使用了很多嵌套的 div，这就是我在 CSS 中定位它们的方式。它工作得很好，但我很好奇这是否是一种好方法？还是有更简单/更有效的方法？

谢谢!

link to the image

Answer 1

首先:你的方法完全没问题，效率取决于整个页面。也许这些想法可以提高效率:

如果您的 div 类或 id 是唯一的

你也可以只写类 - 你不必写整个路径。而不是

#content > .inner > .content > div { }

可以这样写

.content > div { }

在使用嵌套 div 时很有用

当使用嵌套 div 时，您经常需要多次输入大量代码:

#content > .inner > .content { }
#content > .inner > .content > div {}
#content > .inner > .footer {}
#content > .inner > .footer > div {}

有非常有用的脚本叫做 LESS 和 SASS (它们的工作原理几乎相同)。它们允许您一次性编写所有内容，例如

#content {
   .inner {
      .content {
         // some stuff
         div {
            // some stuff
         }
      }
      .footer {
         //some stuff
         div {
            // some stuff
         }
      }
   }
}