要说css的变化那是发展比较快的，新增的选择器也很多，而且还有很多都是比较实用的。这里举出一些案例，看看你平时都是否用过。
1 新增的一些写法：
1.1 导入css
这个是非常好的一个变化。这样可以让我们将css拆分成公共部分或者多个模块化的css,然后在需要的地方按需导入实用。
<style>@import url("css/style.css");</style>1.2 变量和函数
变量这个自然不用多说，大家用的可能比较多，但是大家也要注意变量的作用域问题。
函数这里重点谈一下。
attr函数：函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。
官方说主要是为了给伪类中content做内容使用，经过测试color属性使用attr我这里不生效。其余可以生效。
<div class="btn2" data-color="red" width="200px">按钮</div>
...
.btn2 {
width: attr(width);
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
background-color: var(--parimaryColor);
background-color: attr(data-color); /*这里的颜色不被支持*/
cursor: pointer;
}
rgb/rgba函数：这两个大家可能用的比较多。不过还能像大家在less或者这sass里面直接写十六进制值。
background-color: rgba(100, 1000, 100, 0.5);
background-color: rgba(red, 0.5); // 这样写不被支持
background-color: rgba(#f60, 0.5); // 这样写不被支持计算类函数：这主要包括calc,min,max等
width : max ( 10vw , 4em , 80px );渐变颜色类函数：这个后面专门出个文章再来写。
三角函数： sin/cos等用的不多。
counter()和counters(): 计数器
<style>
article {
counter-reset: paragraph; /* 初始化计数器 */
}
article p:before {
content: counter(paragraph) ". "; /* 显示计数器值 */
counter-increment: paragraph; /* 每个段落后计数器递增 */
}
</style>
</head>
<article>
<p>这是第一段。</p>
<p>这是第二段。</p>
<p>这是第三段。</p>
</article>
2 新的选择器
2.1 并集选择器(交集选择器)
这是我自己取得名字，写法就是必须没有空格连在一起，表示多个选择器同时存在才会生效的选择器。
<style>
.style1{
background-color: #f60;
width: 100px;
height: 100px;
}
.style2 {
background-color: red;
width: 100px;
height: 100px;
}
.style1.style2 {
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<div class="style1">风格样式1</div>
<div class="style2">风格样式2</div></div>
<div class="style1 style2">两个风格同时存在</div>2.2 伪类选择器
1 :root 选择文档的根元素，即<html>元素
2 :empty 选择没有子元素的元素（包括文本节点）。注意，空格和换行符也被视为子节点，因此这些元素不会被视为空。
3 :has() 它允许你选择包含特定子元素的父元素。这个选择器可以用于更精确地控制样式，而不需要改变HTML结构。
/* 选择包含有.child类的元素 */
.parent:has(.child) {
/* 样式规则 */
}4 :focus 选择获得焦点的元素
常用于表单输入元素（如文本框、单选按钮、复选框等）上，以指示当前哪个元素处于激活状态
5 :enabled和:disabled 分别选择启用和禁用的表单元素（如输入框、按钮等）
这对于提高表单的可用性和清晰度非常有用
6 :checked 选择被选中的<input type="radio">、<input type="checkbox">或<option>元素
这允许你为选中状态提供自定义样式
7 :read-only和:read-write 分别选择只读和可编辑的表单元素（如文本框）
这些伪类可以帮助你区分不同状态的表单元素，并相应地调整它们的样式
8 :valid和:invalid 分别选择通过验证和未通过验证的表单元素
这些伪类对于实现表单验证反馈非常有用，可以直观地告诉用户哪些字段需要更正
9 :required和:optional 分别选择被标记为必填和可选的表单元素
这些伪类可以帮助你为不同类型的表单字段提供不同的样式或提示
2.3 浏览器滚动条相关
::-webkit-scrollbar系列 注意也支持相关伪类比如:hover，也可以通过父类约束范围。
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button: 两端的按钮
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
::-webkit-scrollbar {
// width: 0 !important;
background: transparent;
// height: 0 !important;
}
::-webkit-scrollbar-button {
// width: 0 !important;
background-color: transparent;
// height: 0 !important;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background: #333; /* 滚动条颜色 */
border-radius: 2px; /* 定义滑块的圆角 */
}
/* 设置滚动条轨道的颜色 */
::-webkit-scrollbar-track {
background: transparent; /* 滚动条轨道颜色 */
}
/* 定义滚动条滑块悬停样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #333; /* 定义滑块在悬停状态下的颜色 */
}2.4 特殊伪元素选择器
1 ::before 和 ::after 这个和常见，可以在元素的内容前后插入生成的内容。
2 ::first-letter 和 ::first-line 可以选择文本的第一个字母或者第一行。
3 :focus-within 当元素本身或其后代元素获得焦点时， :focus-within 伪类的元素就会有效。
<style>
/* 定义表单样式 */
.form-container {
border: 2px solid #ccc;
padding: 20px;
margin: 20px;
}
/* 当表单内的任意元素获得焦点时，改变表单容器的边框颜色 */
.form-container:focus-within {
border-color: blue;
}
</style>
<!-- HTML 结构 -->
<div class="form-container">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" />
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" />
<button type="submit">提交</button>
</div>
4 :focus-visible 当元素通过键盘（例如 Tab 键）获得焦点时，显示不同的样式
<style>
/* 定义表单样式 */
.form-container {
border: 2px solid #ccc;
padding: 20px;
margin: 20px;
}
/* 当表单内的任意元素获得焦点时，改变表单容器的边框颜色 */
.form-container:focus-within {
border-color: blue;
}
/* 当元素通过键盘获得焦点时，显示不同的样式 */
[tabindex]:focus-visible,
input:focus-visible,
button:focus-visible {
outline: 2px solid red;
background-color: yellow;
}
</style>
<!-- HTML 结构 -->
<div class="form-container">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" />
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" />
<button type="submit">提交</button>
</div>5 :target 是一个 CSS 伪类，用于选择当前 URL 中带有片段标识符（即锚点）的目标元素。当用户点击链接中的锚点时，该伪类可以选择并样式化目标元素。
6 :selection 是一个 CSS 伪元素，用于选择文档中被用户选中的文本。它可以用来定义选中文本的样式，如背景色和文字颜色。
3 新增的属性
css3 甚至后面的css4预案也新增了一些css属性：
其中flex 和grid后面开专题去讲。
1 gap
在CSS中，gap 属性主要用于Flexbox和Grid布局中，用于控制项目之间的空间。
2 hyphens
属性用于控制文本中的自动断字（即自动插入连字符）。这对于长单词或跨行的文字尤其有用，可以提高文本的可读性和排版质量。这个很有用。他有三个属性值：
p { hyphens: none; } // 不断行
p { hyphens: manual; } // 只在手动插入的连字符位置进行断字。
p { hyphens: auto; } // 自动在合适的位置插入连字符以实现断字。
<style>
p {
hyphens: auto; /* 启用自动断字 */
word-wrap: break-word; /* 允许长单词换行 */
}
</style>
<p>
This is a sample paragraph with a verylongwordthatshouldbebroken to
demonstrate the hyphens property.
</p>
会根据页面宽度自适应断行
3 content-visibility
这个属性可以延迟渲染非首屏内容，优化加载性能。
4 控制文本方向
unicode-bidi: 该属性用于控制文本在双向文本环境中的重写行为，它有多个值可以选择，比如 normal, isolate, isolate-override, embed, embed-override 等。
unicode-bidi 通常与 direction 属性一起使用，以更精细地控制文本的方向。
text-orientation: 它可以取值 mixed 或 upright。
writing-mode: 属性值有：
horizontal-tb: 水平书写模式，默认值。
vertical-rl: 从右向左的垂直书写模式。
vertical-lr: 从左向右的垂直书写模式。
5 文本相关
1 -webkit-line-clamp：多行文本溢出，但要注意其Webkit特性的局限性。
.flex-multi-line-ellipsis {
display: flex;
flex-direction: column;
line-clamp: 3; /* 需要JavaScript支持 */
overflow: hidden;
}2 text-decoration属性 这个属性以前就有，只不过多了很多修饰的属性：
text-decoration-line设置文本装饰线的位置
none：指定文字无装饰
underline ：指定文字装饰下划线
overline ：指定文字装饰上划线
line-through ：指定文字的装饰是贯穿线
text-decoration-style 文本装饰线条形状
solid ：实线
double ：双实线
dotted ：点状线条
dashed ：虚线
wavy ：波浪线
text-decoration-color 文本装饰线条颜色
3 文本描边(仅webkit内核浏览器能支持)
-webkit-text-stroke-width：设置文本描边的宽度，写长度值
-webkit-text-stroke-color ：设置文本描边的颜色，写颜色值
-webkit-text-stroke ：复合属性，设置文字描边的宽度和颜色值
4 shape-outside: 允许文本环绕不规则形状的元素，为文本布局和设计开辟了新的可能性。
5 text-align-last: Text-align-last 指定块或行的最后一行（强制换行符之前）如何在其容器内对齐。
6 outline 轮廓
outline-width ： 外轮廓宽度
outline-color ： 外轮廓颜色
outline-style ： 外轮廓风格
none ： 无轮廓
dotted ： 点状轮廓
solid ：实线轮廓
double ：双实线轮廓
outline-offest： 设置外轮廓与边框的距离，正负值都可设置
outline:50px solid blue；7 bancground渐变色支持：
webkit-background-clip：text 背景呈现在文字上。
border-image: 实现描边效果,但是不支持圆角。
border-image-source: linear-gradient(to right, red, #578aef);
border-image-slice: 1; /* 可以调整以控制渐变重复的次数 */
border-image-repeat: stretch; /* 控制边框图片的重复方式 */
<style>
.box2 {
width: 400px;
height: 100px;
margin: 100px auto;
border-radius: 10px;
/* 去除之前的边框设置 */
/* 添加 border-image 属性 */
border: 5px solid;
border-image-source: linear-gradient(to right, red, #578aef);
border-image-slice: 1; /* 可以调整以控制渐变重复的次数 */
border-image-repeat: stretch; /* 控制边框图片的重复方式 */
}
</style>
<div class="box2"></div>1. 线性渐变（Linear Gradients）
线性渐变是从一个方向到另一个方向的渐变效果。你可以指定一个起点和一个方向（或一个角度），并且至少定义两个颜色结点。
to right：从左到右。
to bottom right：从左上到右下。
角度：如 45deg 表示从45度方向开始渐变。
div {
background-image: linear-gradient(to right, red, yellow);
}多个叠加
<style>
body {
background-color: #f60;
}
.rectangle {
width: 305px;
height: 75px;
background: linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom
right,
linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>2 径向渐变（Radial Gradients）
径向渐变是从一个中心点向外扩散的渐变效果。
circle：圆形。
ellipse：椭圆形。
closest-side：形状大小直到最近的一边。
farthest-side：形状大小直到最远的一边。
closest-corner：形状大小直到最近的角落。
farthest-corner：形状大小直到最远的角落。
div {
background-image: radial-gradient(circle, red, yellow, green);
}3 圆锥渐变（Conic Gradients）
圆锥渐变是围绕一个中心点旋转的渐变效果。
div {
background-image: conic-gradient(from 45deg, red, yellow, green, blue);
}下面举几个例子：
1 渐变文字
.box {
width: 400px;
background-image: linear-gradient(red, yellow, green);
font-size: 80px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: transparent;
font-size: 50px;
-webkit-background-clip: text;
}2 渐变边框
<style>
.box2 {
position: relative;
width: 400px;
height: 100px;
margin: 100px auto;
border-radius: 10px;
background: #fff;
background-clip: padding-box;
border: 5px solid transparent;
}
.box2::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -5px;
border-radius: 10px;
background: linear-gradient(to right, red, #578aef);
}
.box1 {
width: 400px;
background-image: linear-gradient(to right, red, #578aef);
font-size: 80px;
text-align: center;
line-height: 100px;
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<div class="box2">
<div class="box1">渐变文字</div>
</div>
</body>3 网格背景
8 css事件相关
1 pointer-events 控制事件响应
pointer-events: auto;：元素是鼠标事件的目标，事件会被正常处理。
pointer-events: none;：元素不是鼠标事件的目标，点击事件会穿过该元素并在其后面的元素上触发。
pointer-events: visiblePainted;：只适用于 SVG，类似于 auto，但不包括某些不可见的图形元素。
2 scroll-behavior 该属性定义了溢出元素的滚动行为，只需简单的声明即可实现平滑的滚动动画
3 user-select: 控制用户是否可以选择元素内的文本，从而更好地控制用户交互和界面设计
9 变形相关
1 Object-fit 指定如何调整元素内容的大小以适合其容器、保留纵横比并控制溢出行为1
2 Transform: 支持的函数也比较多，大家常用的有rotate旋转/scale缩放/translate移动等，通常结合动画的比较多。
transform垂直水平居中：
.centered-element {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f60;
}10 css滤镜
filter：系列支持的函数有:blur模糊/grayscale灰度这个大家应该用的比较多(重大祭奠会用)
backdrop-filter: 此属性将图形效果（例如模糊或色移）应用于元素内容后面的区域。它非常适合创建磨砂玻璃效果或为元素添加微妙的视觉增强效果。
mix-blend-mode：此属性控制元素的内容与其背景混合的方式，提供与图形设计软件中类似的各种混合模式
11 css动画部分
这部分我后面会出专题来讲。包括前面提到的flex弹性盒子,grid布局等，这些相关内容都会分专题来讲。