为什么Tailwind CSS类名中会有反斜杠？

Question

我正在尝试学习并使用一种新的实用框架，这在当今非常流行。 TailwindCSS

按照文档的说明编译我的 CSS 时，我发现很多 CSS 类名中都有冒号:，并且前面有反斜杠\

为什么会这样呢？这是为了让 CSS 理解那里有一个:而不是转义它吗？

- Rohan

Answer 1

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

`这样的类名可以将该元素在不同屏幕大小下的宽度设定为50%或25%。

```

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

这样的类名可以将该元素在不同屏幕大小下的宽度设定为50%或25%。

```

tablet:bold

如果媒体匹配定义为tablet的媒体查询，则应用于类bold中定义的属性。

在HTML5类名中，冒号是一个完全有效的字符。然而，在CSS选择器中，它是一个保留字符。因此，如果您想选择类名包含冒号的元素，您需要转义冒号。

因此，如果您有以下HTML：

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

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

.one\:two

- Jörg W Mittag

---

非常有用且简单的答案。 - Jishnu Raj

在JavaScript中，实际上需要两个反斜杠：document.querySelector(".one\\:two");。您可以在https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector上找到更多信息。 - undefined