.getMenu1{ top: 0px; } .getMenu2{ top: 50px; } .getMenu3{ top: 100px; }如何简写这一段有规律的css代码
时间: 2024-03-03 15:52:59 浏览: 76
css menu sample
可以使用属性选择器和 `calc()` 函数来简写这段有规律的 CSS 代码,如下所示:
```
[class^="getMenu"] {
top: calc((attr(class, numeric) - 1) * 50px);
}
```
这个 CSS 规则使用了属性选择器 `[class^="getMenu"]` 来匹配所有 `class` 属性以 `"getMenu"` 开头的元素,并且使用了 `attr()` 函数来获取元素的 `class` 属性值中的数字部分,并且减去 `1`,然后乘以 `50px` 来计算 `top` 属性值。这样可以大大简化重复的 CSS 代码。
阅读全文