除了常用的 :hover、:active、:focus，CSS 中还有一些冷门但非常实用的伪类，可以帮助你更优雅地处理各种交互场景。本文整理了 8 个值得掌握的 CSS 伪类，附带代码示例和兼容性说明。

最近，Chrome 119 终于正式对:user-valid和:user-invalid这两个验证伪类进行了支持。看名称，似乎和:valid和:invalid有点相似，那么有什么区别呢？快速了解一下吧

CSS Custom Highlight API即将到了，它实现了浏览器原生支持的CSS文本高亮功能，它的实现不会改变dom结构，因此性能非常高效。目前在谷歌Chrome 105中已经正式支持

伪类和伪元素是CSS中基础概念，::before，::after这两个大家应该用的比较多了。今天把伪类和伪元素重新做了一个整理。首先，伪类和伪元素是两个东西，这个从名字也能看出来。

:has() 伪类是个非常好用的选取器，能够做到许多原本需要使用JS 才能达到的事，他的规范在很久之前就有制定，但是碍于浏览器性能的影响一直没有被支援，直到今年2022 ，随着Safari 开始支援:has() 的使用

CSS选择器允许你通过类型、属性、位于HTML文档中的位置来选择元素。本教程阐述了三个新选项:is()、:where()和:has()。选择器通常在样式表中使用。下面的示例会找到所有<p>段落元素并将字重更改为粗体：

:has() 伪类是一个功能非常强大的伪类，因为它可以实现类似“父选择器”和“前面兄弟选择器”的功能，对CSS的开发会有颠覆性的影响。

前段时间，偶然发现，Chrome 浏览器和 Firefox 浏览器中， :not() 伪类都已经支持复杂选择器了（ 兼容性 见下图），迫不及待给大家介绍下。

在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对标题中的 <b> 标签进行颜色调整，我们应该都写过这样的代码：

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

这篇文章鼓励构造 UI 时使用更多纯 CSS 和更少的 JS。熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。

现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的CSS :is() 和 :where() 伪类。 Chrome的实施仍然落后。

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。CSS 伪类用于向某些选择器添加特殊的效果。

css定义超链接四个状态也是有顺序的，对于这4个伪类的设置，有一点需要特别注意，那就是它们的先后顺序，要让它们遵守一个顺序原则，也就是link ~ visited ~ hover ~ active 。

一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。