收藏
批改状态：合格
老师批语：写得很不错哟
1、相邻选择器与兄弟选择器
相邻选择器（Adjacent sibling selector）可选择紧接在一个元素后的元素，且二者具有相同的父亲元素。相邻选择器使用了加号（+）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
h1+p{
color:red;
}
</style>
</head>
<body>
<p>Hello word!</p>
<p>Hello word!</p>
<h1>Hello word!</h1>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
兄弟选择器（brother selector）可选择紧接在某一个指定元素的后面的所有兄弟结点，且都具有相同的父亲元素。兄弟选择器使用了波浪号（~）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>兄弟选择器</title>
<style type="text/css">
h1~p{
color:red;
}
</style>
</head>
<body>
<p>Hello word!</p>
<p>Hello word!</p>
<h1>Hello word!</h1>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、:nth-child() 和 :nth-of-type()选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、padding 对盒子大小的影响与解决方案
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,html{
width: 100%;
height: 100%;
}
#main{
width: 80%;
height: auto;
background: darkgray;
}
.one{
width: 60px;
padding: 20px;
border: 1px solid black;
background: cornflowerblue;
}
.father{
width: 102px;
}
.son{
padding: 20px;
border: 1px solid black;
background: yellow;
}
</style>
</head>
<body>
<div id="main">
<div class="one">宽度还未分离</div><br />
<div class="father">
<div class="son">宽度分离原则</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、同级塌陷, 嵌套传递与自动挤压
嵌套传递在使用中不好控制显示位置，所以最好少用。
自动挤压可以用来实现居中显示。
同级塌陷可以理解为当有2个div上下相邻排列。2个同时设置了相邻位置的边距时，只会有其中一个相对大的数值生效。此现象可以称为同级塌陷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style3.css">
<title>外边距的三个特征</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
width:200px;
height:200px;
background-color: red;
}
.box1 {
margin-bottom: 30px;
}
.box2 {
margin-top: 60px;
}
.box3 {
width: 200px;
height: 200px;
background-color: blue;
}
.box4 {
width:100px;
height:100px;
background-color: red;
}
.box4 {
margin-top: 0;
}
.box3 {
padding-top: 50px;
height: 150px;
}
.box5 {
width: 200px;
height: 200px;
background-color: blue;
}
.box {
margin: auto;
}
.box6 {
width:200px;
height:200px;
background-color: red;
}
.box5 {
margin: auto;
}
.box6 {
margin: 50px auto;
}
</style>
</head>
<body>
<h3>同级塌陷</h3>
<div class="box1"></div>
<div class="box2"></div>
<h3>嵌套传递</h3>
<div class="box3">
<div class="box4"></div>
</div>
<h3>自动挤压</h3>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
