1、相邻选择器与兄弟选择器
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/* 相邻选择器 就是选择与当前选择器相邻的下一个选择器 */
.c1 + * {
color:red;
}
/* 兄弟选择器 当前选择器后面的所有选择器(不包括当前选择器) */
.c1 ~ *{
color: blue;
}
</style>
<body>
<ul->
<li>苹果</li>
<li id="c2">桔子</li>
<li class="c1">芒果</li>
<li>西瓜</li>
<li>面包</li>
<li>哈密瓜</li>
<li>草莓</li>
</ul->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、nth-child和nth-of-type
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/* nth-child:选择父元素下面等于第几个的子元素,下方就是选择ul里面等于第4的元素，无论什么类型的标签 */
/* 关注点：是子元素所属的位置 */
ul :nth-child(4) {
color: blue;
}
/* nth-of-type:选择父元素下面等于第几个的子元素,下方就是选择ul里面等于第4的li */
/* 关注点：1、是子元素所属的位置 2、同时子元素的类型也要一样*/
ul li:nth-of-type(4) {
color: red;
}
</style>
<body>
<ul>
<p>水果</p>
<li>苹果</li>
<li>桔子</li>
<li>芒果</li>
<li>西瓜</li>
<li>面包</li>
<li>哈密瓜</li>
<li>草莓</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、padding对盒子的影响
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.big{
width: 400px;
height:400px;
border: 1px solid red;
}
.hezi{
width: 200px;
height: 200px;
border: 1px solid blue;
padding: 20px;
box-sizing: border-box;
}
</style>
<body>
<div class="big">
<div class="hezi">
小盒子
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、margin中的同级塌陷, 嵌套传递与自动挤压
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/*同级坍塌：就是2个盒子原色的margin会以大的为准，相当于重叠了小的数值部分*/
.div1{
width: 300px;
height:300px;
margin-bottom: 50px;
background: red;
}
.div2{
width: 300px;
height: 300px;
margin-top: 30px;
background: blue;
}
/* 嵌套传递 就是子元素的margin会导致父元素增加，这就是margin导致的，可以修改子元素用padding代替 */
.div3{
width: 300px;
height:300px;
background: red;
}
.div4{
width: 200px;
height:200px;
margin-top: 50px;
background: #999;
}
/* 自动挤压 ： 可以自动挤压左边或右边 */
/* 通常用于盒子居中对齐 */
.div5{
border: 1px solid #006400;
width: 600px;
height: 300px;
margin: 0 auto;
}
</style>
<body>
<div class="div1">我是盒子1</div>
<div class="div2">我是盒子2</div>
<div class="div3">
<div class="div4">
盒子4
</div>
</div>
<div class="div5">
我这个盒子居中对齐
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例