Question

请参阅下面的css代码

#AdminUser .admin-label-margin {
margin-left: 160px;
margin-top: -25px;
padding-bottom: 10px;
}
#AdminUser #entitytitle h4 {
margin-left: 175px;
padding-bottom: 13px;
}
#AdminUser input[type='text'] {
    width: 180px;
}
#AdminUser .admin-label-span {
    margin-left: -15px !important;
    margin-right:12px;
}

每次我指定根元素并将css应用于特定控件。我不想这种情况。如何简化上述css并一次指定根选择器？

Answer 1

CSS不支持此功能。但是，您可以使用 Sass/SCSS 等预处理器。

使用SCSS：

#AdminUser {
    .admin-label-margin {
        /* snip */
    }
    /* snip */
}

请注意，最终代码与原始代码类似，SCSS 将上述代码翻译为您当前的代码，以便您可以更轻松地开发代码。

Answer 2

LESS可能很有用：

#AdminUser {
    & .admin-label-margin {
        margin-left: 160px;
        /* ... */
    }
    /* ... */
}

Answer 3

无法在CSS中简化它。

您可以使用CSS预处理器语言，例如SASS，它允许您：

#AdminUser {
    .admin-label-margin {
        margin-left:160px;
        margin-top:-25px;
        padding-bottom:10px
    }

    #entitytitle h4 {
        margin-left:175px;
        padding-bottom:13px
    }

    input[type='text'] {
        width:180px
    }

    .admin-label-span {
        margin-left:-15px!important;
        margin-right:12px
    }
}

Answer 4

您可以使用像LESS这样的CSS预处理库，它允许您使用嵌套语句表达您的CSS。

所以它可以让你写

#AdminUser {
    .admin-label-margin {
    margin-left: 160px;
        margin-top: -25px;
        padding-bottom: 10px;
    }

    #entitytitle h4 {
        margin-left: 175px;
        padding-bottom: 13px;
    }

    input[type='text'] {
        ...
    }

    .admin-label-span {
        ...
    }
}

但是一旦处理完毕，它就会以标准的非嵌套格式将CSS输出到浏览器。即。它会生成你原来的CSS：

#AdminUser .admin-label-margin {
margin-left: 160px;
margin-top: -25px;
padding-bottom: 10px;
}
#AdminUser #entitytitle h4 {
margin-left: 175px;
padding-bottom: 13px;
}
#AdminUser input[type='text'] {
    width: 180px;
}
#AdminUser .admin-label-span {
    margin-left: -15px !important;
    margin-right:12px;
}

请记住，如果你使用LESS，你需要考虑一些因素：

在构建过程中运行.less到.css文件的编译
或使用较少的javascript使用即时转换
- 你可能会得到FOUC的
- 您需要检查您的网络服务器是否很乐意提供较少的mime类型

从好的方面来说，你将获得mixins，变量和LESS带给你的所有优点以及你正在寻找的编码语法方便。

简化CSS根选择器

4 个答案: