如何仅用CSS选择器按后代索引选中指定元素？

目标HTML结构 #

<div>
  <span>foo <span foo="bar">bar</span></span>
  <span>a</span>
  <span>a</span>
  <span foo="bar">select me only</span>
  <span>c</span>
</div>

需求说明 #

需要用纯CSS选择器精准选中文本为“select me only”的<span>元素，等价于JavaScript的document.querySelectorAll('span[foo=bar]')[1]或jQuery的.eq(1)效果。不能使用依赖固定子元素位置的选择器（比如div span:nth-of-type(4)[foo=bar]），避免新增元素后选择失效。

解决方案 #

1. 精准匹配（推荐，CSS Selectors Level 4）

使用:nth-child(an+b of <selector>)语法，它会先在父元素的子元素中筛选出符合指定选择器的元素，再按位置选取：

span[foo="bar"]:nth-child(2 of span[foo="bar"])

这个选择器的逻辑是：在当前元素的父元素子元素中，先找出所有带foo="bar"属性的<span>，然后选中其中的第2个。无论新增多少其他<span>元素，只要目标元素仍是第二个匹配条件的元素，选择器就始终有效。

2. 旧浏览器兼容方案（仅适用于仅有两个目标元素的场景）

如果需要兼容不支持CSS Selectors Level 4的旧浏览器，可以用相邻兄弟选择器组合：

span[foo="bar"] ~ span[foo="bar"]

这个选择器会选中所有在第一个span[foo="bar"]之后的同属性<span>元素。如果确定页面中只有两个符合条件的元素，它就能精准选中目标；若存在更多符合条件的元素，此方案会选中第一个之后的所有元素，需结合其他条件调整。

内容的提问来源于stack exchange，提问作者Daniel