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

好吧，我不知道你的HTML代码，但是你可以摆脱一些事情，并针对所需的实际元素，避免过度规范。只是一个例子，适合您的需求，但您明白了：

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

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

Answer 2

不，就是这样。你可以通过不那么具体的事情来缓解一些麻烦，特别是在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。

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

2 个答案: