css3选择器querySelector应用

2022-07-08 网页编程网 网页编程网

<head>
<meta charset="UTF-8">
</head>
<body>
    <div id="a">a</div>
    <div class="b">b</div>
    <div class="c">
        <div class="d">
            <span>
                <a data="123"></a>
                <a data="456"></a>
                <a data="abc"></a>
                <a data="a b"></a>
                <a data="a b c"></a>
                <p data>ccc</p>
                <p>ddd</p>
            </span>
        </div>
        <div class="e">eee</div>
    </div>
    <script>
    window.onload = function() {
        var a = document.querySelector('#a'),
            b = document.querySelector('.b')
 
        console.log(a);//<div id="a">a</div>
        console.log(b);//<div class="b">b</div>
 
        var c1 = document.querySelector('.c span p')//默认选取第一个
        var c2 = document.querySelectorAll('.c span p')//选取的是一个数组
        var c3 = document.querySelectorAll('.c span p:first-child')//选取的是一个数组
        var c4 = document.querySelectorAll('.c *')//选取.c所有子级
        var c5 = document.querySelectorAll('.c, p')//选取.c和所有p元素
        var c6 = document.querySelectorAll('a+p')//选取a后面紧邻的p
        var c7 = document.querySelectorAll('[data]')//选取带有data属性的元素
        var c8 = document.querySelectorAll('[data~=a]')//选取data属性包含a这一项的元素
        var c9 = document.querySelectorAll('.c div:first-child')//选取.c的第一个子级div
        var c10 = document.querySelectorAll('p:not([data])')//选取.c的第一个子级div
        var c11 = document.querySelectorAll('span a:nth-child(2n)')//选取.c的第一个子级div
 
        console.log(c1)
        console.log(c2)
        console.log(c3)
        console.log(c4)
        console.log(c5)
        console.log(c6)
        console.log(c7)
        console.log(c8)
        console.log(c9)
        console.log(c10)
        console.log(c11)

}
    </script>
</body>

阅读原文

阅读 1859

123 显示电脑版