css - 有没有办法通过 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 中，但您可以使用以下 css 实现来实现这一点:

http://lesscss.org/

http://sass-lang.com/

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

Sass 如果你想之后将其编译为 css 并希望在 Nodejs 中编译 css 服务器端作为示例，那么 css 会更好。

我个人更喜欢更少的 css，因为我可以轻松地将它与 javascript 结合起来，以使用单个颜色变量动态更改整个颜色方案。 Less css 也可以像普通 css 一样被缩小，因为这只是删除空格等，但是当它没有缓存时，站点总是需要获取 less.js 资源，并且如果没有启用 JavaScript，那么 less css 就无法工作。

你甚至可以这样做:

#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