Html 如何在纯css中基于单元格值为行着色？

我正在使用一个生成非常分层css的框架

我只想根据字符串单元格值（一列）为整行（或每个单元格）提供背景色。我不想使用javascript，而是纯css

下面是html css片段，其中整行应该根据

获得背景色。标题值具有不同的值，因此Geen Voorraad应添加红色背景色。有人提出解决办法吗

纳姆
代码
普里斯
沃拉德状态
吉奇维德
沃多恩德·沃拉德
贝珀特沃拉德酒店
金·沃拉德
维洛彭
佐肯
维森
产品托沃根
产品贝维肯
产品维杰德伦
产品档案馆
Naar Excel exporteren
1辆tot 2货车2 Huidige weergave 1辆tot 2货车2
▲
纳姆
代码
普里斯
沃拉德
▼
沃拉德状态
2.
2.
0,00
0
雷沃
雷尔
1321,00
1.

在纯CSS中，无法根据元素的内容选择元素。 但是在您发布的代码中，您在每一行上应用了不同的类，因此，如果您可以通过友好的方式实现，这就可以实现。 否则，您将需要一行javascript

[更新] 我找到了一个（相当棘手的）方法；从html代码开始，我添加了一个伪元素作为整行的背景；这要求TRs具有相对位置（因此它们必须将display属性设置为与“table row”不同的值，在本例中，我选择了“flex”）。 以下是css代码：

.voorraad tr, 
.voorraad tr div 
{
  position: relative;
  overflow: hidden;
}

.voorraad tr div 
{
  z-index:1;
}

.voorraad tr,
.mx-name-head-row
{
  display:flex;
  justify-content:center;
  align-items:center;
}

.voorraad td,
.mx-name-head-row th
{
  flex:1;
  text-align:center;
}

td[title="Geen Voorraad"]:before
{
  content: "";
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:orange;
}

---

这不是您所说的“干净代码”，但它可以完成这项工作。

如果您可以将带有标题的td移动到行首，那么您就可以这样做

td[title=“Geen Voorraad”]，td[title=“Geen Voorraad”]~td{
背景色：红色；
}

2.
2.
0,00
0
雷沃
雷尔
1321,00
1.

CSS无法满足您的需求。你不能在等级制度中上升这回答了你的问题吗@jsduniya关于CSS的问题不需要“JSFIDLE”。堆栈代码段工作得很好。不，我不知道如何编写完整的css路径来应用选择器。你有什么想法吗？你可以用css来做，但它需要大量的硬编码。例如，可以根据数据属性中的值使用数据属性和CSS属性选择器进行样式设置。但是看看您的表，似乎有很多行，这对于大型表来说不是一个好的解决方案。最好的解决方案是使用JavaScript，因为它可以保持代码的干净和最小化。例子：