css3选择器使用例子

例1  选择title属性值为 honor/荣耀的span元素

document.querySelector("#sale-card .next-cascader-menu li span[title='honor/荣耀']").click()

 

  

 

例2 css伪类选择器

 

 

 

li:nth-child(even)偶数

li:nth-child(odd)奇数

　　

 nth-child选择父类元素第N个孩子，不管里面孩子是否为同一类型，

nth-of-type 选择指定类型元素

 

例3：伪无素选择器

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*  nth-child(1)
        匹配父元素第一个子元素, 不管类型是不是li，
        所以，父元素第一个孩子元素是li，则匹配成功背景生效
        否则，匹配失败，可以使用nth-of-type来匹配指定第几个li元素
    /* li:nth-child(1) {
        background-color: red;
    } */


    /*  nth-of-type(1)
        匹配父元素第2个子元素li，指定了第二个li元素
    */
    /* li:nth-of-type(1) {
        background-color: red;
    } */


    /* 子元素选择器,选取直接后代，跨代不生效 */
    /* ul>li {
        background-color: red;
    } */



    /* h1+h2 
        相邻兄弟选择器,选择紧连着另一元素后的元素，不是所有兄弟元素*/
    /* 
    h1+h2 {
        background-color: red;
    } */

    /* h1~h2 
        后续所有兄弟元素*/
    /* h1~h2 {
        background-color: red;
    } */

    /* p.selected
        单类选择器
    */
    p.selected {
        color: red;
        font-weight: bold;
    }


    div.selected {
        color: green;
        font-weight: 100;
    }

    /* .dim.selected
        多类选择器
    */
    .dim.selected {
        color: gray;
    }
</style>

<body>
    <ul id='level1'>
        <li>1111</li>
        <li>222</li>
        <li>33333</li>
        <li>4444</li>
        <li>5555</li>
        <li>6666</li>
        <li>77777</li>
        <li>8888</li>
        <li>9999</li>
        <li>101010101</li>
        <ul>
            <li>1111</li>
            <li>222</li>
            <li>33333</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
            <li>77777</li>
            <li>8888</li>
            <li>9999</li>
            <li>101010101</li>


        </ul>
    </ul>

    <li>xxxx</li>
    <li>yyyy</li>

    <h1>xxxx</h1>
    <h2>yyyy</h2>
    <h2>zzzzz</h2>

    <div class="dim selected">abc</div>
    <p class="selected">xyz</p>

</body>

</html>

　　

 

学习网址：https://www.bilibili.com/video/BV1B44y1i75j?p=12

 

posted on 2021-11-08 01:54  码农-编程小子  阅读(111)  评论(0)    收藏  举报