对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中的html部分，这也是很糟糕的做法。

Answer 3

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

Answer 4

有attr但是

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

从理论上讲，您应该能够

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

但是似乎没有任何支持。

我在想，也许您可​​以将其与calc结合使用，但是calc也不支持模数，因此，实际上您无法使用CSS属性从pid计算颜色。

我觉得你不走运。 您应该使用所使用的任何模板语言来计算pid-> color，应该同样容易。