元素定位之CSS定位

要点:

        1、为什么要进行元素定位？

            在进行自动化时，所运行的脚本动作，是对页面对象的一种操作行为，每一个页面都有一个document，所以需要使用元素定位，使用元素定位的写法如使用原生态；document.getElementById('#ID');

        2、进行元素定位的原则是什么？

            元素定位的方式有很多，但宗旨只有1个，那就是能快速便捷的查找到唯一的元素，以及后期的方便维护；

主题：

1、CSS定位的延伸，本身就是CSS <style>所来，当你接触前端<style> CSS的编写方式，你就能发现其中的定位奥妙；

2、在HTML中的标签（下图）主要分为【块级标签】、【内联标签】，两者的区别在于一个会产生换行，一个不会产生换行.

     比如：div是一个块级标签,会产生换行,span是一个内联标签,不产生换行；

    

3、CSS可以通过元素的id、class、标签（input）这三个常规属性直接定位到，而这三种编写方式，在HTML中编写style的时候，可以进行标识如：

    #su

    .class

    input

   比如：百度的登录页面

     id ===  #su                  

     class === .bg s_btn       

     标签 === input[type="submit"]  或者 input[value="百度一下"]

     

localxpath = "#su"   ||  localxpath = ".bg s_btn"   

localxpath = "input[type="submit"]"   ||  localxpath = "input[value="百度一下"]"

driver.find_element_by_css_selector(localxpath)

4、在平时的工作中，若是仅依靠self（当前）的位置，来写脚本是不够的，还需要通过其他的定位方式：

比如：它的后代、子类、同级、父类来进行定位？

        在进行定位前，补充点小知识，在HTML中标签的层级关系：

                

 子类定位“>”：通过先定位父类（self）,再定位self下的子类

                在#mHolder下有个子类#mCon，那么就可以这样写 #mHolder>#mCon （当然你也可以直接用#mCon，但必须保证是定位的原则）

同级定位“+”： 通过先定位父类（self）,再定位self 同级的类

      在多个列表同级的情况下，同样的道理，需要使用“+”进行同级定位；

后代定位 “ ”：通过先定位父类（self）,再定位self 后代的类

    span [id="su"]

父类定位 ？  目前CSS3样式 暂时不支持，未研究，如大家有兴趣，可以在CSS4中进行研究。

如有疑问，大家可以加我QQ：403225435 进行互相学习