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

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

或

.level1 .level2 .level3 * { }

如果你不改变源代码，

是你唯一的其他语法选择。如果你有除element1和element2之外的其他元素，后者将失败。我会和前者一起去。

Answer 2

如果你把它们放在像“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 */ }

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

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

这取决于你想做什么或不可能。

Answer 3

如果

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

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

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

Answer 4

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

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

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

老实说，如果您有多个级别的课程，那么可能值得检查您的HTML结构，看看您是否可以删除一些divs等。