html - CSS 选择紧跟在具有不同属性值的元素之后放置的所有元素

Question

HTML:

<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>

我只想选择第三个<li>在这个例子中。属性名是固定的，但它的值是动态的，事先不知道。数量<li> s 也是动态的。这可以用纯 CSS 完成吗？

Answer 1

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

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

如果此属性只存在一组有限的值，并且您事先知道这些值，则可以为每个可能的值编写一个选择器，但您需要对这些值中的每一个进行硬编码。这样的选择器将使用 :not() 伪类与相邻的兄弟组合器 + 一起构造，这是我使用过的一种技术 here :

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

如您所知，如果您有很多不同的可能值，您的选择器会增长得非常快。但这是使用纯 CSS 执行此操作的唯一真正方法，即使那样它仍然需要提前知道可能的值。