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之类的预编译器来实现此目的，这允许such syntax，并在编译时产生普通的非缩小CSS。

Answer 2

不是普通的css，但是您可以使用以下css实现：

http://lesscss.org/

http://sass-lang.com/

少 css非常棒，因为它可以在浏览器中运行，您甚至可以在css中使用变量，并在点击按钮时使用javascript随时更改它们。

Sass 如果你想在之后将它编译成css并希望在nodejs中编译css serverside作为示例，那就更好了。

我个人更喜欢较少的CSS，因为我可以轻松地将它与javascript结合使用单个颜色变量动态更改整个colorschemes。较少的css也可以像普通的css一样缩小，因为它只是删除了空格等，但是当它没有被缓存时，网站将总是需要获取less.js资源，如果没有启用javascript，则更少的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 */
    }
}

最有趣和最有用的功能是mixins和变量，不再重复代码：D

无论如何，通过CSS中的通用层次结构来缩小选择范围？

2 个答案: