Selenium web automated testing---css positioning advanced syntax

css element positioning advantage

css is used with HTML to match HTML element nodes
Concise and clear language
Basically use css for front-end development

Important matters for css element positioning

Find the only attribute of the positioning element, the priority is id, name, css, xpath
If there is no unique attribute, find the parent node, child node or adjacent element node with unique attribute
If the attribute is random, it cannot be used

Introduction to css selector

id selector, defined by "#"
class selector, defined by "."
Label selector
Attribute selector
Group selector
Combination selector

Pseudo-class

nth-child(n) matches the Nth child element belonging to its parent element (commonly used)
nth-last-child(n), which matches the last element
nth-of-type(n), the Nth label of the specified type

Reference Code:

<!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>

Selenium web automated testing---css positioning advanced syntax

css element positioning advantage

Important matters for css element positioning

Introduction to css selector

Pseudo-class

Reference Code:

Guess you like