Html CSS选择紧跟在具有不同属性值的元素之后的所有元素

HTML:

测试
测试
测试
测试

---

在本例中，我只想选择第三个

。属性名称是固定的，但其值是动态的，并且事先不知道。

的数量也是动态的。这可以用纯CSS实现吗？

我认为这可以通过使用第n-child（）选择器来实现：

<ul>
  <li attribute_name='a'>Test</li>
  <li attribute_name='a'>Test</li>
  <li attribute_name='b'>Test</li>
  <li attribute_name='b'>Test</li>
</ul>

---

是否有解决方案取决于您的标记

由于选择器大多是静态的，并且没有变量，因此在事先不知道值的情况下，无法使用选择器根据具有相同属性值的另一个元素（或缺少该元素）将任何元素与特定属性值相匹配。如果无法确定此属性的可能值，则没有纯CSS解决方案

如果该属性只存在一组有限的值，并且您事先知道这些值，则可以为每个可能的值编写选择器，但需要对其中的每个值进行硬编码。这样的选择器将使用

：not（）

伪类和相邻的兄弟组合器

+

构造，我使用了一种技术：

---

正如您所知，如果您有许多不同的可能值，那么您的选择器将快速增长。但这是使用纯CSS实现这一点的唯一真正方法，即使这样，它仍然需要事先知道可能的值。

从问题中可以看出，元素的数量和属性值是动态的，因此

：nth-child（）

将无法按预期工作。

p:nth-child(2)
{
 background:#ff0000;
}

li:not([attribute_name='a']) + li[attribute_name='a'], 
li:not([attribute_name='b']) + li[attribute_name='b']