machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
							<!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>层次选择器</title>
</head>

<body>
    <div class="wrapper">
        <span>span1</span>
        <div class="box">
            <span>span2</span>
        </div>
    </div>
    <p>p标签1</p>
    <p>p标签2</p>
    <div class="test">test</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $('.wrapper~p').css('color','red')
    $('.wrapper~.test').css('color','red')
</script>

<!-- 选择紧挨着的相邻兄弟元素 -->
<!-- <script>
    $('.wrapper+p').css('color','red')
    // $('.wrapper+.test').css('color','red')
    // 虽然test也是wrapper的兄弟元素，但不是紧挨着的，所以选择不到
</script> -->

<!-- 选择子元素 -->
<!-- <script>
    $(function(){
        $('.wrapper>span').html('这是wrapper的子元素')
    })
</script> -->

<!-- 空格：选择所有的后代元素 -->
<!-- <script>
    $(function(){
        $('.wrapper span').html('修改后的span内容')
    })
</script>     -->
</html>