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>的数量也是动态的。这可以在纯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实现此目的的唯一真正方法，即使这样，它仍然需要提前知道可能的值。

Answer 2

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

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

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

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

2 个答案: