根据属性将CSS填充设置为值

Question

这不起作用：

li[depth="3"] { padding-left: calc(40px * attr(depth integer)); }

然而，这有效：

li[depth="3"] { padding-left: calc(40px * 3); }

attr(name type)内部显然不支持calc()。

• 此处提供更多信息：On attr() and calc()

有没有办法用适用于属性depth的所有整数值的CSS替换以下CSS？

li[depth="2"] { padding-left:  40px; }
li[depth="3"] { padding-left:  80px; }
li[depth="4"] { padding-left: 120px; }

Answer 1

没有特殊的CSS可以实现这一点 - 通常最好避免在DOM中引用样式/布局规则。 CSS flexbox model可能对此有用，可以根据元素的大小来确定元素的大小。

如果你需要使用你指定的CSS路由，像Sass这样的预处理器可以允许你使用循环自动编写所有代码（下面的例子用SCSS语法） - 尽管注意到最后的。生成的css文件将编译出所有规则。另请注意，此处的范围是有限的 - 您可以将20调整为任何数量，但它无法无限制地工作（尽管我假设在示例中它甚至不会达到20）。

@for $i from 1 to 20 {
  li[depth="#{$i}"] { padding-left: #{($i - 1) * 40px}; }
}