有句谚语叫“条条大路通罗马”，本意是说到一个城市可能有许多路径可选。对于CSS选择器也是一样。使用HTML元素中的不同特征点，可以组合出唯一确定某节点的许多种定位方案。有些CSS选择器可能在网页的CSS样式表中很少有机会出场，但在复杂页面的JS脚本中，有可能会用到这些选择器，来对网页的DOM树进行操作。比如网易股票网页（http://money.163.com/stock/#from=stock_index）中有这么一句代码：
<span _ntesquote_="code:US_DOWJONES;attr:price;fixed:2;color:updown;bgchg:price" class="num cRed">17619.51</span>
如果直接用Chrome的开发者工具拷贝此元素的CSS选择器，我们得到：
#market > div.normal.on > div > table > tbody > tr.tab.nb.selected > td.badge_large > span
可以看出，基本上是利用HTML中标签的层级关系来最后定位到这个span元素的。如果拷贝xpath选择器：
//*[@id="market"]/div[3]/div/table/tbody/tr[1]/td[2]/span
换用Firefox的xpath查看器插件：
id('market')/x:div[3]/x:div/x:table/x:tbody/x:tr[1]/x:td[2]/x:span
可以看到两个浏览器的xpath表达式也类似，默认都是利用dom元素间的层级关系来定位。
但问题在于，这个页面上有个鼠标指针联动的选项卡，随着用户鼠标的滑动，会显示不同地区的指数。因而上面的路径，并不能定位到唯一的元素！
比如用casperJS打开网易股票的页面后，若用以上选择器来取值，取到的将是默认第一个选项卡的国内股票指数，而非第三个选项卡的美国股票指数。当然也许可以模拟鼠标行为来让第三个选项卡处于前端。但毕竟不方便。
观察这段span的HTML代码，我们看到有_ntesquote_=”code:US_DOWJONES;attr:price;fixed:2;color:updown;bgchg:price”一句，其中code:US_DOWJONES（美国道琼斯）这句，应该是这个span值的唯一标识。
所以在casperJS中，使用CSS的属性选择器来定位这个元素：
document.querySelector('span[_ntesquote_="code:US_DOWJONES;attr:price;fixed:2;color:updown;bgchg:price"]').innerHTML
果然，得到了正确的道琼斯指数值。
CSS里的各种选择器是相当灵活和完备的，需要自己在使用过程中多加学习和积累。
原创文章，作者：苏葳，如需转载，请注明出处：https://www.swmemo.com/2133.html
