选择器是用于选取元素样式名称的工具。在使用过程中只需要将“生成器”中的名字替换“样式类文件名称”即可。直接发布,无需改动元素,指定元素的外观即可变动。但是,选择器的使用与页面位置可能相关,如果对文档内容做出修正(元素布局发生变化),有可能导致选择器选到错误的元素,从而引发外观错误。因此,这个方法不推荐使用,只在必要场合使用,并且使用时,需要改动数据(参考数据绑定篇章)来观察选择是否错误,如果错误,需要对选择器语法有一定了解才可以修正,因此,此部分的应用要求较高、请谨慎使用。
在WIDE的安装路径的chrome-ex中找到SelectorGadget文件,按照元素拷贝器中的安装步骤安装到chrome浏览器中。
(1)使用chrome浏览器打开需要进行修改的页面,点击页面右上角拓展程序中的SelectorGadget图标(如图1)即可,打开之后,在页面右下角出现选择器界面(如图2),之后用鼠标左键单机选择想修改的元素。
图1
图2
注:
① 若点击SelectorGadget没有反应,清除浏览器缓存重启浏览器即可;
② 当颜色背景为绿色时表示本元素被选中,SelectorGadget将生成匹配的最短选择器,同时,黄色高亮表示其他同样被选择器选中的元素,在黄色和绿色上点击,元素即变成红色,背景颜色为红色表示选择器将排除此元素。
(2)在选择好元素之后,将选择器中的名称复制粘贴到样式类文件中对应的位置即可(如图所示)。
替换结果如下:
| 没有发现有效的选择器:选择元素之后的样式类名称在此显示。
| 清除:所选元素当中不被包含在样式类名称内的元素。
| 切换位置:将选择器界面在页面右侧上下切换。
| XPath:即为XML路径语言,它是一种用来确定XML文档中某部分位置的语言。
| ?:帮助部分,提示各颜色背景代表的含义
| X:关闭
使用选择器设置对应的元素,选择器的使用与页面位置可能相关,不稳定,使用时,需要改动数据来观察选择是否错误,如果错误,需要对选择器语法有一定了解才可以修正,因此,此部分的应用要求较高、请谨慎使用。