«

»

CSS中的属性选择器

css 选择器 casperjs有句谚语叫“条条大路通罗马”,本意是说到一个城市可能有许多路径可选。对于CSS选择器也是一样。使用HTML元素中的不同特征点,可以组合出唯一确定某节点的许多种定位方案。有些CSS选择器可能在网页的CSS样式表中很少有机会出场,但在复杂页面的JS脚本中,有可能会用到这些选择器,来对网页的DOM树进行操作。比如网易股票网页(http://money.163.com/stock/#from=stock_index)中有这么一句代码:

如果直接用Chrome的开发者工具拷贝此元素的CSS选择器,我们得到:

可以看出,基本上是利用HTML中标签的层级关系来最后定位到这个span元素的。如果拷贝xpath选择器:

换用Firefox的xpath查看器插件:

可以看到两个浏览器的xpath表达式也类似,默认都是利用dom元素间的层级关系来定位。

但问题在于,这个页面上有个鼠标指针联动的选项卡,随着用户鼠标的滑动,会显示不同地区的指数。因而上面的路径,并不能定位到唯一的元素!

比如用casperJS打开网易股票的页面后,若用以上选择器来取值,取到的将是默认第一个选项卡的国内股票指数,而非第三个选项卡的美国股票指数。当然也许可以模拟鼠标行为来让第三个选项卡处于前端。但毕竟不方便。

观察这段span的HTML代码,我们看到有_ntesquote_=”code:US_DOWJONES;attr:price;fixed:2;color:updown;bgchg:price”一句,其中code:US_DOWJONES(美国道琼斯)这句,应该是这个span值的唯一标识。

所以在casperJS中,使用CSS的属性选择器来定位这个元素:

果然,得到了正确的道琼斯指数值。

CSS里的各种选择器是相当灵活和完备的,需要自己在使用过程中多加学习和积累。

1 星2 星3 星4 星5 星 (尚无评分)
Loading...Loading...

相关文章

用CasperJS抓取京东的价格数据 初学CasperJS,很多问题困惑不解。比如京东的价格数据采集。打开一个有商品的京东页面。在Chrome中检查...
CasperJS中querySelector使用的一些问题 CasperJS是PhantomJS(一个Webkit内核的无界面浏览器)和SlimerJS(对应于Gecko内核)的一个封装,用于...
浏览器中元素的定位类型 网页中元素的定位用由position属性确定,分为绝对定位,相对定位。除此之外还有浮动定位。position的取...
浏览器中CSS的盒模型 首先是CSS中画布的概念,根据CSS2规范,名词“画布”描述为“格式化的结构渲染所用的空间”---也就是浏览器...
浏览器的绘制阶段 在浏览器的绘制阶段,会遍历渲染者树,并调用渲染者的“paint”方法在屏幕上显示内容。绘制需要用到UI基础...
浏览器的布局 下来就是浏览器的布局过程。当渲染者被创建并且增加到树上时,它并没有位置和尺寸。计算这些值被称为布...
浏览器样式表的规则匹配和级联顺序 浏览器中CSS样式的匹配并非总是那么简单,某些情况下可能需要对规则加以处理以使匹配更容易。下面是几个...
浏览器中使用规则树来计算样式 当计算某个元素的样式内容时,我们首先计算规则树里的一条路径或是使用一条已经存在的路径。接下来就开...

发表评论

电子邮件地址不会被公开。