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

Question

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

谢谢！

link to the image

Answer 1

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

如果您的div-class或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
         }
      }
   }
}

Answer 2

直接子选择器（即＆gt;）很好，但我个人不喜欢它，因为它很难移动和重复使用样式。例如，如果我想在#container以外的地方使用.content，我将不得不更改整个CSS堆。理想情况下，您应该能够重新使用标记块而无需更改CSS。

直接子选择器最适合用于限制应用样式的深度。例如，使用.content＆gt;是合适的。如果您希望样式仅适用于直接儿童，那么您可以为更深层次的儿童设置另一种风格。如果情况并非如此，那么您也可以使用命名良好的类和ID选择器。