css - 根据属性将 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}; }
}