CSS 中是否有通过公共层次结构缩小选择的方法？

Question

总之，我想转这个：

#WRITE-USER input[type=text],
#WRITE-USER input[type=password],
#WRITE-USER input[type=email],
#WRITE-USER textarea,
#WRITE-USER select {
     /* common properties */
}

像这样：

#WRITE-USER {
     input[type=text], input[type=password], input[type=email], textarea, select {
          /* common properties */
     }
}

有办法吗？

感谢您的帮助。

Answer 1

不是通过使用普通 CSS。您需要使用像 SASS to achieve this, which allows for such syntax 这样的预编译器，并在编译时产生普通的非缩小 CSS。

Answer 2

不是简单的 css 但您可以使用以下 css 实现来做到这一点：

http://lesscss.org/

http://sass-lang.com/

Less css 很棒，因为它可以在浏览器本身中运行，您甚至可以在 css 中使用变量并随时更改它们javascript 单击按钮。

Sass css 如果你想之后编译成 css 并且想在服务器端编译 css 更好以nodejs为例。

就我个人而言，我更喜欢 less css，因为我可以轻松地将它与 javascript 结合使用，以使用单个颜色变量动态更改整个配色方案。 Less css 也可以像正常 css 一样缩小，因为那只是删除空格等，但站点在未缓存时始终需要获取 less.js 资源，而 less css不启用 javascript 将无法工作。

你甚至可以这样做：

#WRITE-USER {
    /* write-user styles */
    input {
        /* input styles */
        &[type=text],
        &[type=password],
        &[type=email], {
            //specific input type style, yes we can use single line comments now
        }
    }
    textarea {
        /* textarea style */
    }
    select {
       /* select style */
    }
}

最有趣和有用的功能是混合和变量，不再重复代码:D

CSS 中是否有通过公共层次结构缩小选择的方法？

Is there anyway to minify selection by common hierarchy in CSS?

css

minify

css-selectors