css - 有没有办法通过 CSS 中的公共(public)层次结构来缩小选择？

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 更好。

就我个人而言，我更喜欢 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