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

【问题标题】：CSS selecting all elements that are placed immediately after an element with a different attribute valueCSS 选择紧跟在具有不同属性值的元素之后的所有元素
【发布时间】：2014-09-26 11:02:51
【问题描述】：

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 中完成吗？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

我认为这可以通过使用 nth-child() 选择器来完成：

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

http://jsfiddle.net/davekerr/94Cgt/

【讨论】：

从问题来看，元素的数量和属性值是动态的，所以:nth-child()不会按预期工作。