Question

似乎这是一个很好的方法来构建css。是否存在会导致这种情况不可能发生的情况？

我正在考虑以下内容：

table#myTable{
    thead{
        color:red;
    }
    tbody{
        color:blue;
        td.title{
            background-color: green;
        }
    }
}

Answer 1

我无法回答为什么 CSS没有此功能。有一些系统，如LESS（http://lesscss.org/）允许您编写这样的结构，然后将它们“编译”为常规CSS。

LESS中的嵌套示例:(来自该链接）

嵌套规则在Less中，您可以简单地将选择器嵌套在其他选择器中，而不是构造长选择器名称来指定继承。这使得继承更加清晰，样式表更短。

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

Answer 2

因为在编写规范时没有人想到这个想法，或者没有人认为它会有用。

您可以使用SASS：http://sass-lang.com/

语法示例：

table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.2em

Answer 3

这样会很好，但CSS的设计和组织方式不支持。

但是，有一些CSS预处理器允许您以这种方式编码，然后将其处理为真实有效的CSS - 例如LessCSS。

Answer 4

您可能仍会根据您的文档结构缩进选择器：

body {
    font-size: 1.4em;
    color: #666;
}

    #Header {
        /* stuff */
    }

        #Header ul {
            /* stuff */
        }

            #Header il {
                /* stuff */
            }

    #Content {
        /* stuff */
    }

除了零星的背景图像：url（''）;属性通常不会运行很长时间，在开发过程中这可能会帮助您保持井井有条。我个人更喜欢没有缩进的CSS，因为我经常让Textmate重新格式化我的样式表。

为什么不在CSS中嵌套？

4 个答案: