CSS 减少语法

Question

我希望位于同一嵌套级别的两个不同 HTML 元素具有相同的 CSS 属性值。这种浪费的语法有替代方法吗？

.level1 .level2 .level3 element1 { /*rules*/ }
.level1 .level2 .level3 element2 { /*rules*/ }

我在想

.level1 .level2 .level3 element1, .level1 .level2 .level3 element2 { /*rules*/ } 

...但这看起来很混乱，并没有减少多少。

是定义新类的最佳方法吗？

Answer 1

我倾向于选择尽可能短的选择器。例如：

.level3 elem1,
.level3 elem2 {
    /* rules */
}

除非您有.levelX .level3 elem1，否则上述规则不会与其他任何内容发生冲突。浏览器解析也更快，因为它不必每次检查那么多类。

说实话，如果您有多个级别的类，那么可能值得检查您的 HTML 结构，看看您是否可以摆脱一些 divs 之类的东西。

Answer 2

.level1 .level2 .level3 element1, 
.level1 .level2 .level3 element2 { }

或

.level1 .level2 .level3 * { }

如果您不更改源代码，这是您唯一的其他语法选择。如果您有 element1 和 element2 以外的其他元素，则后者将失败。我会选择前者。

Answer 3

如果

.level1 .level2 .level3 element1, .level1 .level2 .level3 element2 { /*rules*/ }

看起来很混乱，为什么不把它分成两行？

.level1 .level2 .level3 element1,
.level1 .level2 .level3 element2 {
    /*rules*/
}

Answer 4

好吧，如果你像“level2”那样给他们上课，那就这样做吧：

.level2 { /* rules */ }

意思是不用去：

.level1 .level2 .level3 { /* rules */ }

如果您只是假设 level3 被正确放置，这应该简化如下：

.level3 div, .level3 span, .level3 p { /* rules */ }

相对于替代方案。

没有办法说：

.level3 (div or span or p) { /* rules */ }

不幸的是。

但是如果你想通过元素深度来指定规则，那就有点棘手了。最简单的方法是使用子选择器：

ul li > ul li > ul li { /* rules */ }

如果你知道结构并且可以合理地表达它。这种方法的问题是 IE6 不支持子选择器。如果你这样做：

ul li ul li ul li { /* rules */ }

这些规则将适用于第三级及以下，而不仅仅是第三级。根据可能相互矛盾的不同级别的规则，正确指定可能会变得很棘手：

ul li { /* rules for 1st, 2nd, 3rd level */ }
ul li ul li { /* rules for 2nd and 3rd level */ }
etc

这可能会起作用，这取决于您想要做什么，也可能不会。