过两天可以学js去了，之后学go，学vue，干全栈工程师吧
一、 结构伪类选择器 (Structural Pseudo-classes)
用于在不增加额外类名（Class）的情况下，根据 HTML 结构精准选中元素。常用于列表（li）的样式差异化。
| 语法 | 语义 | 典型应用 |
|---|---|---|
li:first-child |
选中父元素下的第一个子元素 | 列表顶部置顶样式 |
li:last-child |
选中父元素下的最后一个子元素 | 去除列表底部分割线 |
li:nth-child(n) |
选中第 n 个子元素 | 隔行变色（如 2n） |
li:nth-child(n+3) |
选中从第 3 个开始往后的所有元素 | 批量控制列表后期项 |
nth-child 支持公式，如 -n+5 表示前 5 个，这在展示后端接口返回的前几条热门数据时非常有用。
实例：
html
/*结构伪类选择器*/
li:first-child{
background-color: hotpink;
}
li:last-child{
background-color: deeppink;
}
button:hover{
background-color: darkred;
}
li:nth-child(3n+1){
background-color: pink;
}
li:nth-child(n+3)
{
background-color: red;
}
<label>
<ul>
<li>这是第一个元素</li>
<li>这是第二个元素</li>
<li>这是第三个元素</li>
<li>这是第四个元素</li>
<li>这是第五个元素</li>
<li>这是第一个元素</li>
<li>这是第二个元素</li>
<li>这是第三个元素</li>
<li>这是第四个元素</li>
<li>这是第五个元素</li>
</ul>
<br>
<button>this is a button</button>
</label>二、 伪元素选择器 (Pseudo-elements)
用于向选择器添加"装饰性"的子元素，而无需修改 HTML 结构。
- 核心规则 ：必须书写
content: "";属性，否则伪元素不生效。 - 常用类型 ：
::before：在内容最前面插入。::after：在内容最后面插入。::marker：专门控制列表符号。
实例：
html
<style>
/*补充，这是列表的伪元素*/li::marker/*伪元素选择器*/
{
content: "❄";
color:skyblue ;
font-size: 1.5em;
}
.fake::before{/*装饰性的元素 */
padding:10px;/*盒子模型的内边距 */
border: 2px solid;/*盒子模型的边框线*/
margin:10px;/*盒子模型的外边距*/
/*外边距在盒子外面，不会撑大盒子*/
border-top:2px solid rgba(149, 117, 205, 1.0) ;
border-buttom:2px solid rgba(103, 58, 183, 0.8) ;
border-right:2px solid rgba(158, 154, 201, 0.7) ;
border-left:2px solid red ;
display: block;
content: "这是content";
background-color: rgba(var(--color), 0.8) ;
}
.fake::after{
position: absolute;/*以realtive为参考系设置其位置*/
display: block;
content: "这是尾注";
background-color: rgba(var(--color),1.0);
bottom:0 ;/*紧贴尾部*/
left:0;/*紧贴左部*/
width: 100%;
margin:0px 0px 0px 10px ;
}
</style>
<div class="fake">这是一个伪元素寄存器的练习案例</div>三、 盒子模型 (Box Model) ------ 网页布局的基石
网页所有元素皆为"盒子"。理解内外边距的堆叠是排版不乱的关键。
- Padding (内边距)：盒子内容与边框之间的距离。会撑大盒子体积。
- Border (边框) ：盒子的外壳。支持四边单独设置（
border-top等）。 - Margin (外边距) ：盒子与盒子之间的距离。不会撑大盒子。
- 居中技巧 ：
margin: 0 auto;（配合宽度使用可实现水平居中）。
- 居中技巧 ：
- Overflow (溢出处理) ：
visible：默认，内容溢出。hidden：裁剪多余内容。auto：内容溢出时自动出现滚动条。
前三个属性都是写在某些大标签里的，并且都有四种元素
- top
- buttom
- left
- right
表示上下左右四个方向，都可以对这四种元素填入属性或者参数，来改变特定方向的样式
重要补充： 怪异盒子模型 (box-sizing)
border-box (怪异模式) ：盒子总宽 = width（Padding 和 Border 会向内挤压）。这能保证布局不会因为加了内边距而"塌陷"。
一些技巧
设置参考系，用于确定元素的防止位置：
- Relative (相对定位)：作为参考系。它不会脱离文档流，原来的位置依然被占着。
- Absolute (绝对定位) ：以最近的
relative祖先为准进行移动。它脱离文档流，像漂浮在页面上一样。
css
bottom:0 ;/*紧贴尾部*/
left:0;/*紧贴左部*/
width: 100%;.fake::after 使用绝对定位锁定在底部 bottom: 0，这是标准的"底部工具条"写法。
清理默认样式，不同浏览器默认样式不同（比如 ul 自带边距）开发第一步就是清理它们。
一般写成这样：
css
*{/*清理所有东西的内外边距*/
margin:0;
padding:0;
box-sizing: border-box; /* 推荐加入，防止 padding 撑大盒子 */
}盒子阴影：
css
box-shadow:0px 0px 10px 1px red;
/*盒子的阴影 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影*/元素变量：
变量的声明为：--，比如--color，即声明了一个叫color的变量，样例：
css
--color:255, 183, 197;
background-color: rgba(var(--color), 0.6);/*使用var来调用*/圆角写法，使用border-radius，样例：
css
border-radius:10%;圆角50%为最大，也可以填像素
全部代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习用的代码</title>
<style>
/*
{
margin:0;
padding:0;
}
*/
li{
opacity:0.5;
list-style: none;
}
li::marker/*伪元素选择器*/
{
content: "❄";
color:skyblue ;
font-size: 1.5em;
}
/*结构伪类选择器*/
li:nth-child(3n+1){
background-color: pink;
}
li:first-child{
background-color: hotpink;
}
li:last-child{
background-color: deeppink;
}
button:hover{
background-color: darkred;
}
li:nth-child(n+3)
{
background-color: red;
}
label{
display: block;
background-image: url(../image/cuteReisentyan.jpg) ;
background-repeat: repeat;
background-size:100% 100%;
}
/*伪元素选择器*/
.fake{
margin: 0 auto;/*自动居中*/
position:relative;/*设置位置参考系*/
--color:255, 183, 197;
margin-top:50px;
height: 300px;
width:300px;
background-color: rgba(var(--color), 0.6);
border-radius:10%;
box-shadow:0px 0px 10px 1px red;
/*盒子的阴影 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影*/
overflow:auto;/*如果内容超出范围了，自动添加滚动条用的*/
}
.fake::before{/*装饰性的元素 */
padding:10px;/*盒子模型的内边距 */
border: 2px solid;/*盒子模型的边框线*/
margin:10px;/*盒子模型的外边距*/
/*外边距在盒子外面，不会撑大盒子*/
border-top:2px solid rgba(149, 117, 205, 1.0) ;
border-buttom:2px solid rgba(103, 58, 183, 0.8) ;
border-right:2px solid rgba(158, 154, 201, 0.7) ;
border-left:2px solid red ;
display: block;
content: "这是content";
background-color: rgba(var(--color), 0.8) ;
}
.fake::after{
position: absolute;/*以realtive为参考系设置其位置*/
display: block;
content: "这是尾注";
background-color: rgba(var(--color),1.0);
bottom:0 ;/*紧贴尾部*/
left:0;/*紧贴左部*/
width: 100%;
margin:0px 0px 0px 10px ;
}
</style>
</head>
<body>
<!--一般开发中，会将li这样的，带有默认样式的东西，将样式清除掉-->
<label>
<ul>
<li>这是第一个元素</li>
<li>这是第二个元素</li>
<li>这是第三个元素</li>
<li>这是第四个元素</li>
<li>这是第五个元素</li>
<li>这是第一个元素</li>
<li>这是第二个元素</li>
<li>这是第三个元素</li>
<li>这是第四个元素</li>
<li>这是第五个元素</li>
</ul>
<br>
<button>this is a button</button>
</label>
<div class="fake">这是一个伪元素寄存器的练习案例</div>
</body>
</html>