为啥顺风 css 类名中有反斜杠？

Posted 2023-03-07

【中文标题】为啥顺风 css 类名中有反斜杠？

【英文标题】：Why is there a back slash in tailwind css class names?为什么顺风 css 类名中有反斜杠？

【发布时间】：2019-03-02 02:46:24

【问题描述】：

我正在尝试学习和使用一个新的实用程序框架，该框架最近变得非常流行。 TailwindCSS

当我使用文档中的说明编译我的 css 时，我看到很多 css 类名称中有冒号 :，并且前面有一个反斜杠 \

这是为什么呢？这是为了让 CSS 明白那里有一个 : 而不是逃避它吗？

【参考方案1】：

Tailwind 使用带有冒号的类名作为其对响应式设计的支持的一部分。特别是类名，如

tablet:bold

意味着应该应用在类bold 中定义的属性，但前提是媒体与定义为tablet 的媒体查询匹配。

冒号是 html5 类名中完全有效的字符。但是，它是 CSS 选择器中的保留字符。因此，如果要选择名称中包含冒号的类的元素，则需要对冒号进行转义。

所以，如果你有这样的 HTML：

<p class="one:two"></p>

如果你想选择那个元素，对应的查询选择器会是这样的：

.one\:two