欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

selenium web自动化测试---css定位高级语法

程序员文章站 2022-06-28 12:58:58
目录css元素定位优势css元素定位的重要事项css选择器介绍css元素定位优势css配合HTML使用,匹配HTML元素节点语言简洁明了前端开发基本使用csscss元素定位的重要事项找到定位元素的唯一属性,优先级是id,name,css,xpath如果没有唯一属性,就找有唯一属性的父节点、子节点或者相邻元素节点如果属性是随机的,不能使用css选择器介绍id选择器,以“#”定义class选择器,以“.”定义标签选择器属性选择器分组选......

 

css元素定位优势

  1. css配合HTML使用,匹配HTML元素节点
  2. 语言简洁明了
  3. 前端开发基本使用css

css元素定位的重要事项

  1. 找到定位元素的唯一属性,优先级是id,name,css,xpath
  2. 如果没有唯一属性,就找有唯一属性的父节点、子节点或者相邻元素节点
  3. 如果属性是随机的,不能使用

css选择器介绍

  1. id选择器,以“#”定义 
  2. class选择器,以“.”定义
  3. 标签选择器
  4. 属性选择器
  5. 分组选择器
  6. 组合选择符

伪类

  1. nth-child(n)   匹配属于其父元素的第 N 个子元素(常用)
  2. nth-last-child(n),匹配倒数第几个元素
  3. nth-of-type(n),第 N 个指定类型的标签

参考代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器高级</title>
    <style>

    /*id选择器,#定义*/
    #abc{
    color:red;
    }


    /*class选择器,.定义*/
    .flower{
    color:yellow;
    }


    /*标签选择器,可以选中同类型的HTML标签元素*/
    /*标签选择器可以跟class选择器一同使用*/
    p.flower{
    font-size:24px;
    }

    /*分组选择器:选中一组HTML元素,用逗号分隔*/
    p.flower,a{
    background-color:blue;
    }


    /*属性选择器:选择具有特定属性的HTML元素,[]定义*/
    [category]{
    font-size:24px;
    }
    /*特定属性值的属性选择器*/
    [category="poem1"]{
    color:purple;
    }
    /*指定标签类型和属性值的属性选择器*/
    span[category="poem2"]{
        color:gray;
    }
    /*属性选择器:匹配单词边界*/
    p[class~="abc"]{
        background-color:green;
    }


    /*组合选择符
    后代选择器       以空格分隔
    子元素选择器     以>分隔
    相邻兄弟选择器   以+分隔
    后续兄弟选择器   以~分隔
    */

    /*后代选择器:所有后代元素*/
    #div1 p[class~="abc"]{
        font-size:8px;
    }

    /*子元素选择器:只能选中其父元素的直接子元素*/
    #div1>span{
        font-size:40px;
    }

    /*相邻兄弟选择器:可选择紧接在另一元素后面的拥有相同父元素的元素*/
    /*选中指定元素之后的第一个弟弟*/
    span[category="poem1"]+span{
        color:#747747;
    }


    /*后续兄弟选择器:选中指定元素之后的所有弟弟元素*/
     span[category="poem1"]~span{
        color:#0044bb;
    }

    </style>
</head>
<body>
<P id="abc">鹅鹅鹅,曲项向天歌</P>
<P class="flower">夜来风雨声,花落知多少</P>
<a>春眠不觉晓,处处闻啼鸟</a>
<div id="div1">
    <span category="poem1">窗前明月光,疑是地上霜</span>
    <span category="poem2">举头望明月,低头思故乡</span>
    <span name="test">hello,world</span>
    <p class="abc edf">
        <a>百度一下</a>
        <div id="a1">
    <p>好好学习</p>
</div>
</p>
</div>

</body>
</html>

 

本文地址:https://blog.csdn.net/qq_19982677/article/details/109261810