如何使用Google Tag Manager CSS选择器获取指定第三个span的数值93？

首先，先把你给出的HTML结构格式化一下，方便看清层级关系：

<div class="rating-result"> 
  <span> 
    <span> 
      <span itemprop="ratingValue">93</span>% of 
      <span itemprop="bestRating">100</span> 
    </span> 
  </span> 
</div>

为什么你之前的选择器无效？ #

• div.rating-result > span > span：这个选择器匹配到的是第二层的<span>（也就是包裹着93和100的父容器），并不是你要的数值所在的目标span；
• div.rating-result > span:nth-child(3)：div.rating-result的直接子元素只有1个<span>，根本不存在第3个子元素，所以这个选择器自然匹配不到任何内容。

几种可靠的正确选择器方法 #

1. 利用itemprop属性选择器（最推荐）

因为itemprop="ratingValue"是专门标记评分值的语义化属性，不管层级怎么微调，这个属性通常不会变，用它最稳定：

div.rating-result span[itemprop="ratingValue"]

如果想要更精确的层级限定，也可以写成：

div.rating-result > span > span > span[itemprop="ratingValue"]

2. 基于层级结构的子元素选择器

如果你没办法依赖属性，也可以根据目标span在父元素中的位置来选择：
目标span是它父元素（第二层的<span>）的第一个子元素，所以可以用：

div.rating-result > span > span > span:first-child

或者更简洁的写法（前提是页面中没有其他干扰的span）：

div.rating-result span:first-child

用上面任意一种选择器，都能精准定位到包含93的那个span标签啦。

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