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

Question

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

例如，假设有一组 div 包含具有四种字体颜色（例如红色、橙色、黄色或绿色）之一的文本，并且在 div idual div 的颜色取决于它的模数 4。我相信 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 以类似于我上面说明的方式计算 data-pid/attribute 的模数，或者我是否必须使用 javascript 来完成此模数属性的值？如果不可能，有人可以建议他们可以想到的 smallest/easiest js 解决方案吗？

谢谢！

Answer 1

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

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

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

Answer 2

不能在选择器内对属性选择器的值进行算术计算。属性值始终为字符串，最多只支持子字符串匹配。

Answer 3

有 attr 但

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

理论上应该可以做到

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

但似乎没有什么支持它。

我在想也许你可以将它与 calc 结合使用，但 calc 也不支持模数，所以你真的没有办法使用 CSS属性。

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

Answer 4

这是一个简单的 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>

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

Performing calculations (calc) on data attributes in CSS (e.g. modulus)

css

css-selectors

calc

custom-data-attribute