<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div,span {
float: left;
border: 1px solid #CCCCCC;
margin: 8px;
display: none;
}
.clsFraA {
width: 100px;
height: 100px;
background-color: #EEEEEE;
}
.clsFraP {
width: 80px;
height: 40px;
background-color: #dddddd;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#divMid").css("display","block");
});
$("#btn2").click(function () {
$("#divMid").css("display","block");
$("div span").css("display","block");
});
$("#btn3").click(function () {
$("#divMid").css("display","block");
$("div>span").css("display","block");
});
$("#btn4").click(function () {
$("#divMid+div").css("display","block");
});
$("#btn5").click(function () {
$("#divMid").next().css("display","block");
});
$("#btn6").click(function () {
$("#divMid~div").css("display","block");
});
$("#btn7").click(function () {
$("#divMid").nextAll().css("display","block");
});
$("#btn8").click(function () {
$("#divMid").siblings("div").css("display","block");
});
});
</script>
</head>
<body>
<div class="clsFraA">Left</div>
<div class="clsFraA" id="divMid">
<span class="clsFraP" id="span1">
<span class="clsFraC" id="span2"></span>
</span>
</div>
<div class="clsFraA">Right_1</div>
<div class="clsFraA">Right_2</div>
<input type="button" id="btn1" value="divMid">
<input type="button" id="btn2" value="div span">
<input type="button" id="btn3" value="div>span">
<input type="button" id="btn4" value="divMid+div">
<input type="button" id="btn5" value="divMid.next">
<input type="button" id="btn6" value="divMid~div">
<input type="button" id="btn7" value="divMid.nextAll">
<input type="button" id="btn8" value="siblings">
</body>
</html>
