收藏
批改状态：合格
老师批语：选择器很有意思的, 就像是找对象, 根据一定的条件, 进行过滤
一、演示相邻选择器与兄弟选择器
a、相邻选择器
<style>
.color+* {
color: blue
}
/* li[id="color"] {
color: aqua
} */
</style>
</head>
<body>
<ul>
<li id="color">抽烟</li>
<li class="color">喝酒</li>
<li>烫头</li>
<li>泡澡</li>
<li>听相声</li>
</ul>
<ol>
<li>抽烟</li>
<li class="color">喝酒</li>
<li>烫头</li>
<li>泡澡</li>
<li>听相声</li>
</ol>
</body>点击 "运行实例" 按钮查看在线实例
运行结果：
将选择器选择的元素后面的第一个元素样式发生改变。
b、兄弟选择器
<head>
<meta charset="UTF-8">
<title>相领选择器与兄弟选择器</title>
<style>
.color~* {
color: blue
}
/* li[id="color"] {
color: aqua
} */
</style>
</head>
<body>
<ul>
<li id="color">抽烟</li>
<li class="color">喝酒</li>
<li>烫头</li>
<li>泡澡</li>
<li>听相声</li>
</ul>
<ol>
<li>抽烟</li>
<li class="color">喝酒</li>
<li>烫头</li>
<li>泡澡</li>
<li>听相声</li>
</ol>
</body>点击 "运行实例" 按钮查看在线实例
运行结果：
将选择器选择元素从后面的第一个到最后一个的所有元素样式全部发生改变
二、演示nth-child()和nth-of-type()
a.nth-child演示
<head>
<meta charset="UTF-8">
<title>nth-child演示</title>
<style>
ul li:first-child,
ol li:last-child {
color: seagreen;
}
/*无序列表的第一个li和有序列表的最后一个li字体颜色设为海绿色*/
ol li:nth-last-child(2),
ul li:nth-child(3) {
color: blue;
/*无序列表的第三个li和有序列表的倒数第二个li字体蓝色*/
</style>
</head>
<body>
<div>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
<li>泡澡</li>
<li>听相声</li>
</ul>
</div>
<ol>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
<li>泡澡</li>
<li>听相声</li>
</ol>
</body>点击 "运行实例" 按钮查看在线实例
<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>nth演示</title>
<style>
ul li:nth-of-type(odd),
ol li:nth-of-type(even) {
color: seagreen;
}
/*无序列表的奇数li和有序列表的偶数li字体蓝色*/
</style>
</head>
<body>
<div>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
<li>泡澡</li>
<li>听相声</li>
</ul>
</div>
<ol>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
<li>泡澡</li>
<li>听相声</li>
</ol>
</body>点击 "运行实例" 按钮查看在线实例
小结：
nth-child(n)：可以指定元素的位置
nth-of-type(n)：匹配同类型中的第几个元素，如果涉及具体的标签类型时使用，语义化强烈些。
两种在大多数情况下可以互用。
三、演示padding对盒子大小的影响与解决方案，使用宽度分离和box-sizzing.
a、宽度分离
<style>
.box1 {
width: 300px;
border: 2px solid blue;
background-color: lightblue;
}
.box2 {
padding: 50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2943189637,3941537920&fm=26&gp=0.jpg" alt="盒子模型" width="200px">
</div>
</div>
</body>点击 "运行实例" 按钮查看在线实例
b、box-sizing:
<style>
.box1 {
width: 300px;
box-sizing: border-box;
border: 2px solid blue;
padding: 50px 0px 50px 50px;
background-color: lightblue;
</style>
</head>
<body>
<div class="box1">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2943189637,3941537920&fm=26&gp=0.jpg" alt="盒子模型" width="200px">
</div>
</div>
</body>点击 "运行实例" 按钮查看在线实例
小结：
宽度分离：在图片的外面再套一个盒子， 这个盒子内容区和图片大小一致，通过内边框上下左右各加50px，将最外面的盒子高度撑大100px，上下各50px，左边加50，右边100-50=50px，四边跟外框距离一致。
box-sizing：改变盒子在小的计算方式，原业的盒子大小计算方式为content-box，改为border-box，padding已经包含在内，这个方式更加灵活，也容易理解。
四、margin中的同级塌陷，嵌套传递与自动挤压，并提出解决方案。
a、margin的同级塌陷
<style>
.box1 {
width: 300px;
height: 200px;
margin-bottom: 10px;
border: 2px solid blue;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 50px;
border: 2px solid red;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box1">大盒子</div>
<div class="box2">小盒子</div>
</body>点击 "运行实例" 按钮查看在线实例
小结：两个相邻盒子，谁的margin值大，向谁塌陷，换句话说，小的margin值会重叠在大的margin值里
b、嵌套传递
<style>
.box3 {
width: 300px;
height: 200px;
background-color: lightblue;
}
.box4 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box4 {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>点击 "运行实例" 按钮查看在线实例
小结：两个嵌套的块级元素，当子元素的外边框发生变化时，会传递到父元素，解决方法为，设置父元素的padding-top,变相将子元素下移，注意，下移时会超出外边框，需重新设置父元素高度。
c、自动挤压
<style>
.box4 {
margin: auto;
width: 100px;
height: 100px;
background-color: lightcoral;
</style>
</head>
<body>
<div class="box4"></div>
</body>点击 "运行实例" 按钮查看在线实例
小结：当块级元素没有指定左右外边距时，浏览器会自动将元素放到最右或最左边，如果margin左右都设为自动，块元素会居中。
总结：
本节课学了元素相邻和兄弟选择器的使用方法，学习了块元素的内外边距特性，尤其是当有相邻或是嵌套的块元素存在时，内外边距对页面布局就十分重要，必须要熟练掌握。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
