1、实例演示相邻选择器与兄弟选择器，并分析异同。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../css/style1.css"> <title>Document</title> </head> <body> <div id="box1"></div> <ul> <li>1</li> <li id="bg_red">2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
CSS代码：
ul {
margin: 0;
padding-left: 0;
border: 1px dashed red
}
ul>li {
list-style: none;
width: 40px;
height: 40px;
background-color: wheat;
text-align: center;
line-height: 40px;
border-radius: 50%;
display: inline-block;
box-shadow: 2px 2px 3px #999
}
/*相邻选择器：选择li的id=bg_red相邻的那个*/
#bg_red+* {
background: yellow;
}
/*兄弟选择器：选择li的id=bg_red后面所有的同级li*/
#bg_red~* {
background: lightgreen;
}分析：相邻选择器和兄弟选择都是从指定id的选择器后面开始选择。不同的时相邻只选择后面一个，兄弟选择后者的是后面一批。
2、实例演示nth-child()和nth-of-type()选择器并分析异同。
ul {
margin: 0;
padding-left: 0;
border: 1px dashed red
}
ul>li {
list-style: none;
width: 40px;
height: 40px;
background-color: wheat;
text-align: center;
line-height: 40px;
border-radius: 50%;
display: inline-block;
box-shadow: 2px 2px 3px #999
}
/*nth-chlid()*/
ul :nth-child(3) {
background-color: lightcoral;
}
/*nth-of-type()*/
ul li:nth-of-type(6) {
background-color: orangered;
color: white;
}
p:nth-of-type(2) {
background-color: lightcoral;
}3、实例演示parding对盒子大小影响与解决方案，使宽度分离或box-sizing。
***g1 {
width: 300px;
box-sizing: border-box;
padding: 50px;
background-color: antiquewhite;
border: 1px solid #ff9900
}4、实例演示margin中同级塌陷，嵌套和传递自动挤压，并提出解决方案或应用场景。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=s, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin-bottom: 50p;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightgreen;
margin-top: 30px;
}
.box3 {
width: 300px;
height: 250px;
background-color: lightblue;
padding-top: 50px;
margin-top: 30px;
}
.box4 {
width: 200px;
height: 200px;
background-color: lightgreen;
}
.box5 {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 30px auto;
}
</style>
</head>
<body>
<!-- 同级塌陷 -->
<div class="box1"></div>
<div class="box2"></div>
<!--嵌套传递-->
<div class="box3">
<div class="box4"></div>
</div>
<!--自动挤压-->
<div class="box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例