对 CSS 中的数据属性（例如模数）执行计算（计算）

Question

我刚刚了解到我可以使用数据属性来选择元素，这很棒。然后我想根据某些计算对这些元素进行不同的风格化。例如，我想要有 4 种样式，并且我想使用元素的现有 [data-pid] 属性的模数来帮助确定样式。

例如，假设有一组 div 包含具有四种字体颜色（例如红色、橙色、黄色或绿色）之一的文本，并且单个 div 的颜色取决于其四的模数。我相信 CSS（如果可能的话）会是这样的：

div[0=data-pid-modulus-by-4]{
  color: red;
}

div[1=data-pid-modulus-by-4]{
  color: orange;
}

div[2=data-pid-modulus-by-4]{
  color: yellow;
}

div[3=data-pid-modulus-by-4]{
  color: green;
}

是否可以仅使用 CSS 以类似于我上面说明的方式计算数据 pid/属性的模数，还是必须使用 javascript 来完成属性值的模数？如果不可能，有人可以建议他们能想到的最小/最简单的 js 解决方案吗？

谢谢！

Answer 1

这是一个简单的 JavaScript 解决方案：

var pids = document.querySelectorAll('[data-pid]');

Array.prototype.forEach.call(pids, function(elem, index) {
    elem.classList.add('pid-mod-' + (index % 4));
});

.pid-mod-0 {
  color: red;
}

.pid-mod-1 {
  color: orange;
}

.pid-mod-2 {
  color: yellow;
}

.pid-mod-3 {
  color: green;
}

<div data-pid="0">0</div>
<div data-pid="1">1</div>
<div data-pid="2">2</div>
<div data-pid="3">3</div>
<div data-pid="4">4</div>
<div data-pid="5">5</div>
<div data-pid="6">6</div>
<div data-pid="7">7</div>

---

如果所有元素都是彼此的兄弟，那么您可以使用:nth-of-type() 或:nth-child() 与范围。

div[data-pid]:nth-of-type(4n+1){
  color: red;
}

div[data-pid]:nth-of-type(4n+2){
  color: orange;
}

div[data-pid]:nth-of-type(4n+3){
  color: yellow;
}

div[data-pid]:nth-of-type(4n+4){
  color: green;
}

<div class="only-pids-in-here">
  <div data-pid="0">0</div>
  <div data-pid="1">1</div>
  <div data-pid="2">2</div>
  <div data-pid="3">3</div>
  <div data-pid="4">4</div>
  <div data-pid="5">5</div>
  <div data-pid="6">6</div>
  <div data-pid="7">7</div>
</div>

Answer 2

你不能直接在 CSS 中计算值，也不能在 SASS/LESS 中计算。

您必须使用 Javascript 才能做到这一点。

这完全有道理，因为在 CSS 中计算 html 的一部分，即使可行也是很糟糕的做法。

Answer 3

您不能使用选择器内的属性选择器的值执行算术计算。属性值始终是字符串，最多只支持子字符串匹配。

Answer 4

有attr 但是

attr() 函数可以与任何 CSS 属性一起使用，但对内容以外的属性的支持是实验性的。

理论上应该可以的

div[data-color] {
    color: attr(data-color, 'color');
}

但似乎没有任何支持。

我在想也许你可以将它与 calc 结合使用，但 calc 也不支持模数，所以你真的无法使用 CSS 属性从 pid 计算颜色。

我认为你运气不好。你应该用你使用的任何模板语言来计算 pid->color，应该一样容易。