tailwindcss的hover:bg-red-700和.hover\:bg-red-700:hover中的冒号和斜杠啥意思呀

Question

<div class="name-box bg-red-500 hover:bg-red-700"></div>

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
}

看不懂这种写法，hover:bg-red-700和.hover\:bg-red-700:hover这两种写法都看不懂，class里面可以使用冒号吗？然后斜杠又是怎么回事呢？但是效果又是实实在在有的，求大佬解答，谢谢。

Answer 1

classname 中的 hover:bg-red-700 是 css类选择器 的类名字符串，和其他的 name-box bg-red-500 没有区别，只是使用了一个少见的冒号而已

而冒号在 css 当中是有特殊语义的，会用在伪类和伪元素上。
当我们在类名中要使用冒号怎么办呢？那就用反斜杠来转义咯。

以上是我的理解

Answer 2

hover:bg-red-700 是 tailwindcss 的写法，表示 鼠标指上去的时候应用 bg-red-700 这个样式。

.hover\:bg-red-700:hover 这个是编译完的 css 文件，因为 : 在css里是特殊字符后面跟的是伪类所以用反斜杠转义。 后面的 :hover 就是平常 css 的写法。

https://www.tailwindcss.com/ 可以看看文档