html - 重新格式化 css - 折叠冗余路径？

Question

我的样式表往往有很多冗余。例如，

/* example one: different attributes */
div#main_work > div.main_work table.data td span.rating,
div#main_work > div.main_work table.data td span.follow 
   { white-space: nowrap; vertical-align: center; }

/* example two: same upstream, different downstream */
div#main_work > div.main_work > form table,
div#main_work > div.main_work > table,
div#main_work > div.main_work div table
   { width: 100%; margin: 0px;  -moz-box-sizing: border-box; box-sizing: border-box; }

是否有语法上正确的方法来折叠它？

Answer 1

不，就是这样。您可以通过不那么具体来减轻一些麻烦，尤其是在 ID 选择器中:

/* example one: different attributes */
#main_work > .main_work .data .rating,
#main_work > .main_work .data .follow 
   { white-space: nowrap; vertical-align: center; }

/* example two: same upstream, different downstream */
#main_work > .main_work > form table,
#main_work > .main_work > table,
#main_work > .main_work div table
   { width: 100%; margin: 0px;  -moz-box-sizing: border-box; box-sizing: border-box; }

而且您可能可以进一步减少它。尽量使意图简洁明了。作为另一种选择，您可以尝试 LESS stylesheets .