实例演示相邻选择器与兄弟选择器,并分析异同
相邻选择器与兄弟选择器的区别就是，相邻选择器是选择后面与相最近一个，而兄弟选择器是选择后面与它所有相同的
相邻选择器实例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
h1+p {
color: blue;
font-weight: bolder;
}
</style>
</head>
<body>
<p>php中文网第八期学员：512349相邻选择器</p>
<p>我是相邻选择器之前</p>
<p>我是相邻选择器之前</p>
<h1>相邻选择器</h1>
<p>php中文网第八期学员：我是被相邻选择器选中了</p>
<p>php中文网第八期学员：512349相邻选择器</p>
<p>php中文网第八期学员：512349相邻选择器</p>
<p>php中文网第八期学员：512349相邻选择器</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
相邻兄弟选择器实例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
h1~p {
color: brown;
}
</style>
</head>
<body>
<p>php中文网第八期学员：512349相邻兄弟选择器</p>
<p></p>
<p></p>
<h1>相邻兄弟选择器</h1>
<p>php中文网第八期学员：我是512349相邻兄弟选择器选中了</p>
<p>php中文网第八期学员：我是512349相邻兄弟选择器选中了</p>
<p>php中文网第八期学员：我是512349相邻兄弟选择器选中了</p>
<p>php中文网第八期学员：我是512349相邻兄弟选择器选中了</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
ul :nth-child(3) 关注点是位置，父级下的li是第3个位置的选中
li:nth-of-type(3) 关注位置也要关注类型。父级下的位置是第三个类型也要是li,第二个父级下面的第三的个不是li所以没有被选中。
:nth-child()实例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
ul :nth-child(3) {
background-color: blue;
color: aliceblue;
}
</style>
</head>
<body>
<ul>
<li>第一个ul我是第一行</li>
<li>第一个ul我是第二行</li>
<li>第一个ul我是第三行</li>
<li>第一个ul我是第四行</li>
<li>第一个ul我是第五行</li>
<li>第一个ul我是第六行</li>
</ul>
<ul>
<li>第二个ul我是第一行</li>
<li>第二个ul我是第二行</li>
<li>第二个ul我是第三行</li>
<li>第二个ul我是第四行</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
:nth-of-type()实例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
li:nth-of-type(3) {
background-color: blue;
color: aliceblue;
}
</style>
</head>
<body>
<ul>
<li>第一个ul我是第一行</li>
<li>第一个ul我是第二行</li>
<li>第一个ul我是第三行</li>
<li>第一个ul我是第四行</li>
<li>第一个ul我是第五行</li>
<li>第一个ul我是第六行</li>
</ul>
<ul>
<li>第二个ul我是第一行</li>
<li>第二个ul我是第二行</li>
<p>第二个ul我是第三行</p>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
实例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
/*使用了box-sizing的效果*/
.box1 {
width: 300px;
height: 300px;
border: 1px solid #f00;
background: #cccccc;
padding: 50px;
box-sizing: border-box;
}
/*padding对盒子的宽度高度都撑开了*/
.box2 {
width: 300px;
height: 300px;
border: 1px dashed #652;
padding: 50px;
background: #255;
}
</style>
</head>
<body>
<div class="box1">
<img width="200" height="200" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567570933211&di=9575cf5a7c4bd08a5a1054b31582fbb1&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20130416%2FImg372885486.jpg" alt="美女">
</div>
<div class="box2">
<img width="200" height="200" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567570933211&di=9575cf5a7c4bd08a5a1054b31582fbb1&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20130416%2FImg372885486.jpg" alt="美女">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
实例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
/*同级塌陷*/
.box1 {
width: 300px;
height: 300px;
border: 1px solid #f00;
background: #cccccc;
margin-bottom: 50px;
}
.box2 {
width: 300px;
height: 300px;
border: 1px dashed #652;
margin-top: 30px;
background: #998877;
}
/*嵌套传递*/
/*嵌套传递解决办法是给父级div加padding-top:50px;或者父级加overflow: hidden;*/
.box3 {
width: 500px;
height: 300px;
background-color: beige;
}
.box4 {
width: 300px;
height: 200px;
background-color: aqua;
margin-top: 50px;
}
/*自动挤压*/
.box5 {
width: 200px;
height: 200px;
background-color: #f00;
margin-left: 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>运行实例 »
点击 "运行实例" 按钮查看在线实例