## 重中之中~CSS 的高级语法

重中之中~CSS 的高级语法

推荐的定位方式优先级：    
1、优先级最高：ID    
2、优先级其次：name    
3、优先级再次：css selector    
4、优先级最次：xpath

为什么css优先级在xpath之上    
1、css是配合html工作的，它实现的原理是匹配对象；而xpath是配合xml工作的，xpath的实现原理遍历， 所以两者在设计上，css性能更加优秀    
2、相对xpath来说，css的语法更加简洁、优美    
3、前端多用css，不用xpath，所以在技术方面我们有更多的可能获取到帮助


定位元素的注意事项（划重点）  
1、如果你是确定操作某个元素的，表达式要唯一（找到元素的唯一属性）
2、如果没有唯一属性，则先找到能唯一定位的父元素/子元素/相邻元素，然后再使用关系，进行定位    
3、不要使用随机唯一属性定位    
4、多与研发沟通，尽量把元素加上id或者name，并减少不合理的页面元素，
	例如重复id就尽量不要发生
	css 规则有两部分组成：选择器，一条或多条声明
	我们做 web 自动化测试，只需关注选择器部分，帮我们找到元素

我们做UI自动化，经常会出现 NoSuchElementException，也就是找不到元素异常

这个报错的原因有四个
1、表达式确实写错了或元素的确不存在
a.表达式所描绘的元素的确是不存在的
b.循环元素列表的时候，列表里的每一个都找了一遍，但是并不是列表里的每个元素都有
比如，列表里有十个p标签，但只有前五个拥有子元素a标签，所以你在循环到第六个的
时候，就会报错，找不到a标签
2、元素未加载，用显示等待或隐式等待（注意，xpath效率极慢，所需时间更久
3、内嵌网页
4、多标签页

关于什么时候用什么等待

​ 元素未加载而导致的问题，用显示等待或隐式等待
​ 浏览器或电脑性能不高，反应不过来，用强制等待

css语法来喽~~~

/*在css当中，以#定义ID选择器*/
    ``#abc {
      ``color: red;
      ``background: blue;
    ``}

 ``/*在 css 当中，以 . 来定义 class选择器*/
    ``.abk {
      ``color: chocolate;
    ``}

 ``/*标签选择器，标签选择器，选中同类型的所有html标签*/
    ``a {
      ``color: blue;
    ``}

/*标签选择器可以和 class 选择器结合起来使用*/
    ``p.abq {
      ``font-size: 20px;
    ``}

 ``/*分组选择器，以 逗号 来定义，可以将多个选择器组合起来，选中一组标签*/
    ``p, a {
      ``background: aliceblue;
      ``color: red;
    ``}

 ``/*属性选择器，以[]来定义，选中具有特定属性的HTML元素*/
    ``[title="opq"] {
      ``color: red;
    ``}

    ``/*属性选择器，可以不为属性指定值*/
    ``[rel] {
      ``font-size: 50px;
    ``}

    ``/*还可以为属性指定标签类型*/
    ``span[rel]{
      ``font-size: 20px;
    ``}

还是牛x的重点

 ``/*在css当中，有四种组合选择符：*/
    ``/*  后代选择器，以空格分隔*/
    ``/*  子元素选择器，以大于号分隔*/
    ``/*  相邻兄弟选择器，以加号分隔*/python
    ``/*  后续兄弟选择器，以小波浪线分隔*/

    ``/*后代选择器，用于选取某元素所有的后代元素*/
    ``/*下方选择器，选择 所有在div标签之内的所有li标签，不论层级关系是多少*/
    ``div li {
      ``color: red;
    ``}

    ``/*下方选择器，选择 所有在div标签之内的所有li标签且li标签的class属性为 ab1*/
    ``div li.ab1 {
      ``font-size: 20px;
    ``}

    ``/*子元素选择器，选择其父元素下的直接子元素，（只有儿子才能选择*/
    ``div > li {
      ``background: yellow;
    ``}

    ``/*相邻兄弟选择器，选择紧挨在某元素之后的一个元素，且二者拥有相同的父元素*/
    ``#abc + li {
      ``color: red;
    ``}

    ``/*后续兄弟选择器，选择某元素之后的所有弟弟元素，且二者有相同的父元素*/
    ``#abc ~ li {
      ``background: aqua;
    ``}

    ``/*下方选择器，选择 id属性为ab1的标签下的第三个标签，并且标签的类型是li*/
    ``#ab1 > li:nth-child(4) {
      ``color: blueviolet;
    ``}

    ``/*nth-last-child(n)  倒数第几个标签*/
    ``/*first-child 第一个标签*/
    ``/*last-child  第二个标签*/