5个改变你编写CSS方式的新功能

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

在过去一年中，CSS的新功能爆发式增长，它们彻底改变了我们编写CSS的方式。无论你在网页开发的旅程中处于什么阶段，都会有新的东西需要学习。对于一个简单的样式语言来说，它的变化速度确实相当快！

:has() 选择器

新的选择器在除了Firefox之外的所有浏览器中都可以工作，但是当标志打开时它是被支持的，所以我们知道它即将到来。

:has()选择器允许我们根据子元素来为父元素设置样式。例如，我们可以这样做：

代码语言：javascript复制

figure { background: white; }

figure:has(img) { background: grey; }

如果 figure 元素内有 img ，则将其背景更改为灰色。当然，这样做还可以有更多实际的用途，比如：

代码语言：javascript复制

form:has(input:invalid) { /*there an invalid input*/
     background: red; 
}

form:not(:has(input:invalid)) { /*all inputs valid*/
     background: green 
}

那个 :not(:has(input:invalid)) 很酷，但有点让人困惑。基本上，如果 form 没有无效的 input ，它只包含有效的 inputs ，所以它是有效的 form