Question

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

例如，假设有一组div包含具有四种字体颜色之一（例如红色，橙色，黄色或绿色）的文本，并且单个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 /属性的模数，或者我是否必须使用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也不支持模数，所以你真的没办法用pt属性从pid计算颜色。

我觉得你运气不好。您应该使用您正在使用的任何模板语言来计算pid-＆gt;颜色，应该同样容易。

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

4 个答案: