收藏
批改状态：合格
老师批语：写得非常 OK, 继续努力
选择器
标签选择符：
用标签名来表示，用来描述网页元素类型的；通常与其他选择符组合使用，返回一组元素
p{text-align:center;} /*段落 文本居中*/
id选择符：
用'#'表示，用来选择网页中用id属性声明的元素，只返回一个元素
#header{backgroud-color:#ccc;} /*设置背景为灰色*/
类选择符：
用英文的'.'来表示，用来选择使用了class属性声明的元素，通常返回一组相关元素
.blue{color:blue;} /*设置元素文本颜色为蓝色*/
属性选择符：
除class和id，style以外的属性都可以，属性放在一对方括号中[],可以指定多个属性，还可以以对属性值进行正则查询。
[title="http://www.php.cn"]{font-size:20px;}/*将具有该属性的元素文本大小设置为20像素*/
群组选择符：
可以设置多个元素共用样式，用逗号分隔每个选择符
h1,h2,h3,h4,h5,h6{font-weight:lighter;}/*去掉标题元素的加粗样式*/
后代选择符：
根据元素隶属关系来选择，多个选择符之间，用空格分隔
section h1{color:red;}/*将section元素下面所有h1元素文本设置为红色*/
子代选择符：
只选择当前元素直接子元素，用'>'表示，非常复杂，应用了大量伪类元素，是学习的重点。
div > h1{ color: green;}/*将div元素下面子级h1元素文本设置为绿色*/
伪类选择符：
伪类主要应用在特定标签上，表示当前元素的状态。例如a标签的4种状态，未访问，已访问，鼠标悬停，点击中等
a:visited { color: gray;} /*将访问过的链接文本颜色设置为灰色*/
伪元素选择符，设置首字母下沉效果，或者首行的显示效果，主要适合英文，中文应用不多，了解即可
first-letter:设置段落首行的首字母样式
first-line:设置段落首行文本的样子
通用选择符*与同辈选择符+（不推荐使用）
*{font-size: 12px;}: /*设置网页中文本均为12像素*/
可以一次性设置所有标签的统一样式，效率低，影响到了样式继承
p + a{color: pink;}: /*设置p和相邻a标签文本为粉色*/
通常用其他更高效的选择符代替他
实例演示相邻选择器与兄弟选择器,并分析异同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
ul {
margin: 0; /*将外边距清零*/
padding-left: 0; /*将左侧的内边距清零*/
border: 1px dashed red; /*设置红色虚线*/
}
ul li {
list-style-type: none; /*将li标签的黑色圆点类型去掉*/
width: 40px;
height: 40px; /*宽高都设置为40px*/
background-color: wheat; /*设置背景色*/
/*border: 1px solid black;*/ /*边框*/
/*水平和垂直的居中*/
text-align: center; /*水平*/
line-height: 40px; /*垂直居中的技巧：当前元素的高度和行高设置成一样的（单行文本）*/
border-radius: 50%; /*设置圆角，50%*/
/*将一个块级元素转为内联元素*/
display: inline-block;
/*阴影，向右向下偏移两个像素，扩散一个像素，阴影的色彩为回*/
box-shadow: 2px 2px 1px #888;
}
/*相邻选择器*/
#bg-blue + * {
background-color: yellow;
}
/*兄弟选择器*/
#bg-blue ~ * {
/*background-color: green;*/
}
</style>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li class="bg-green">3</li>
<li class="bg-green">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div>
<p>猪哥</p>
<li>朱老师</li>
<p>西门大官人</p>
</div>
<div>
<p id="bg-blue">欧阳克</p>
<li>金莲妹妹</li>
<a href="">百度</a>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
分析：代码中注释了兄弟选择器，只有相邻选择器，#bg-blue + * { background-color: yellow;} 会将id为bg-blue的元素的下一个同级元素的背景变为黄色，代码中有两处，打开代码中的兄弟选择器#bg-blue ~ * {/*background-color: green;*/}，运行，会发现id为bg-blue的元素的后面所有的同级元素都变成了绿色。由此可见，兄弟选择器的优先级大于相邻选择器。
实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
ul {
margin: 0; /*将外边距清零*/
padding-left: 0; /*将左侧的内边距清零*/
border: 1px dashed red; /*设置红色虚线*/
}
ul li {
list-style-type: none; /*将li标签的黑色圆点类型去掉*/
width: 40px;
height: 40px; /*宽高都设置为40px*/
background-color: wheat; /*设置背景色*/
/*border: 1px solid black;*/ /*边框*/
/*水平和垂直的居中*/
text-align: center; /*水平*/
line-height: 40px; /*垂直居中的技巧：当前元素的高度和行高设置成一样的（单行文本）*/
border-radius: 50%; /*设置圆角，50%*/
/*将一个块级元素转为内联元素*/
display: inline-block;
/*阴影，向右向下偏移两个像素，扩散一个像素，阴影的色彩为回*/
box-shadow: 2px 2px 1px #888;
}
/*伪类: 子元素选择器*/
ul :first-child { /*注意ul后的空格*/
background-color: blue;
}
ul :last-child {
background-color: red;
}
ul :nth-child(6) { /*索引从1开始*/
background-color: pink;
}
/*倒数第3个*/
ul :nth-last-child(4) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看nth-child()选择器在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
ul {
margin: 0; /*将外边距清零*/
padding-left: 0; /*将左侧的内边距清零*/
border: 1px dashed red; /*设置红色虚线*/
}
ul li {
list-style-type: none; /*将li标签的黑色圆点类型去掉*/
width: 40px;
height: 40px; /*宽高都设置为40px*/
background-color: wheat; /*设置背景色*/
/*border: 1px solid black;*/ /*边框*/
/*水平和垂直的居中*/
text-align: center; /*水平*/
line-height: 40px; /*垂直居中的技巧：当前元素的高度和行高设置成一样的（单行文本）*/
border-radius: 50%; /*设置圆角，50%*/
/*将一个块级元素转为内联元素*/
display: inline-block;
/*阴影，向右向下偏移两个像素，扩散一个像素，阴影的色彩为回*/
box-shadow: 2px 2px 1px #888;
}
/*伪类: 类型选择器*/
ul li:first-of-type {
background-color: darkorange;
color: white;
}
ul li:last-of-type {
background-color: darkgreen;
color: white;
}
ul li:nth-of-type(5) {
background-color: darkgreen;
color: white;
}
/*将每个div中的第二个子元素背景设置绿色*/
div :nth-child(2) {
background-color: lightgreen;
}
/*选择文档中的第二个p标签的内容*/
p:nth-of-type(2) {
background-color: yellow;
}
/*选中第一个div中的第三个元素*/
div:first-of-type :nth-child(3) {
/*background-color: lightblue;*/
}
/*打开上面注释，发现第二个标签变为了蓝色，因为他也是第一个div中的第三个元素，两者结合的优先级会更高*/
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div>
<p>猪哥</p>
<li>朱老师</li>
<p>西门大官人</p>
</div>
<div>
<p id="bg-blue">欧阳克</p>
<li>金莲妹妹</li>
<a href="">百度</a>
</div>
</body>
</html>点击 "运行实例" 按钮查看nth-of-type()选择器在线实例
关注点不同, 如果关注点是位置: 用nth-child
既关注位置, 又关注类型, 用 nth-of-type
两者结合使用的优先级会更高于单个的使用
padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
使用三种方式写一个加上边框为300px的块，内部图片为200*200px，边框为10px
一般方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调皮的内边距padding</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
border: 10px solid black;
/*照片的宽度是200px*/
background-color: lightgreen;
padding: 40px;
/*padding变大时，盒子也会变大*/
}
</style>
</head>
<body>
<!--将图片显示在容器中间-->
<div class="box1">
<img src="https://img.php.cn/upload/avatar/000/492/469/5d65e10f25a6f328.jpg" alt="头像" width="200" height="200">
</div>
<br />
</body>
</html>点击 "运行实例" 按钮查看在线实例
padding变大时，盒子也会变大，padding是在content大小的基础上扩大的，和图片的大小无关，图片会显示在content的左上角，如果要将图片显示在正中间，需要计算，300px的块，边框为10，则content为200*200，padding为40.
宽度分离：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调皮的内边距padding</title>
<style type="text/css">
.wrap {
width: 300px;
height: 300px;
}
.box2 {
border: 10px solid black;
padding: 40px;
background-color: lightblue;
}
</style>
</head>
<body>
<!--宽度分离-->
<div class="wrap">
<div class="box2">
<img src="https://img.php.cn/upload/avatar/000/492/469/5d65e10f25a6f328.jpg" alt="头像" width="200" height="200">
</div>
</div>
<br />
</body>
</html>点击 "运行实例" 按钮查看在线实例
嵌套div，将外侧的div的content固定宽高为300*300，然后编辑内部的div，border为10px，padding为40px。
box-sizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调皮的内边距padding</title>
<style type="text/css">
.box3 {
width: 300px;
height: 300px;
box-sizing: border-box;
/*padding: 80px;*/
padding: 40px;
background-color: pink;
border: 10px solid black;
}
</style>
</head>
<body>
<!--box-sizing-->
<div class="box3">
<img src="https://img.php.cn/upload/avatar/000/492/469/5d65e10f25a6f328.jpg" alt="小姐姐" width="200" height="200">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
使用了box-sizing: border-box;盒子的边框固定为300*300px，border为10，padding为40图片居中，如果padding为80，则图片完全紧贴右下角。
实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
同级塌陷：
两个盒子同级排列时，比如：一个盒子在上一个在下时，设置上方盒子A的margin-button为50px，下方盒子B的margin-top为50px，控制台查看时，A的下方外边距依然是50px，B的上方外边距依然是50px，但是在视觉上两个之间的距离依然是50px，此时更改B盒子的上方外边距为30px，控制台查看时，A的下方外边距依然是50px，B的上方外边距依然是30px，但是在视觉上两个之间的距离依然是50px，B盒子的上外边距塌陷到A盒子的下外边距中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
/*box-sizing: border-box;*/
width: 150px;
height: 150px;
background-color: lightblue;
margin-bottom: 50px;
}
.box2 {
width: 150px;
height: 150px;
background-color: lightgreen;
margin-top: 30px;
}
</style>
<title>捉摸不定的外边距maring</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
嵌套传递：
两个块级元素程父级或嵌套关系，子元素的margin会传递到父元素上
解决方法：如想要子元素距父元素的上方50px，设置外边距会传递，此时可以设置父级元素的内边距为50px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box3 {
box-sizing: border-box;
width: 150px;
height: 150px;
background-color: lightblue;
padding-top: 50px;
}
.box4 {
width: 100px;
height: 100px;
background-color: lightgreen;
/*margin-top: 50px;*/
}
</style>
<title>捉摸不定的外边距maring</title>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
自动挤压：
外边距的自动挤压，margin-left：auto；元素会尽可能的压到右边，margin-right：auto；元素会尽可能的压到左边，同时作用会挤压到中间，页面布局时，可以margin：30px auto;居中并且距离顶部30px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box5 {
box-sizing: border-box;
width: 150px;
height: 150px;
background-color: lightblue;
margin: 30px auto;
}
</style>
<title>捉摸不定的外边距maring</title>
</head>
<body>
<div class="box5"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
在不同情况下选择合适的选择器会事半功倍。
盒子的内边距相关展示内容时，需要计算，注意边框。
盒子的外边距的三种情况需要在布局时多加注意
总是感觉对盒子的理解及使用掌握依旧不是很好，依旧要好好学习。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
