为什么 tailwind css 类名中有一个反斜杠?

2024-03-12

我正在尝试学习和使用最近非常流行的新实用程序框架。顺风CSS https://tailwindcss.com/

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

这是为什么?是为了让CSS明白有一个:还有而不是逃避吗?


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

tablet:bold

表示类中定义的属性bold应该应用,但前提是媒体与定义为的媒体查询匹配tablet.

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

所以,如果你有这样的 HTML:

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

如果您想要选择该元素,相应的查询选择器将类似于:

.one\:two
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 tailwind css 类名中有一个反斜杠? 的相关文章

  • CSS 轮廓宽度不起作用

    我正在尝试将输入元素的轮廓宽度设置为焦点 无论我的设置如何 轮廓宽度都保持不变 就像它是无法更改的默认设置一样 这是来自 codepen 的示例 http codepen io FrenkyB pen mEaEyL editors 1100
  • 我应该向所有内容添加类/id,还是使用其他选择器

    我永远不确定选择元素的最佳 最有效 方法是什么 假设我有以下布局 非常简单的示例 div ul li Link 1 li li Link 2 li li Link 3 li ul div 我想选择我的无序列表 确保我不会影响整个网站中的任何
  • 如何将“重要”添加到 zIndex

    我网站上的某些附加组件之间存在冲突 使用 Firebug 我注意到如果我将 important 添加到 z 索引 我可以避免冲突 但 z index 值是使用 JavaScript 设置的 而不是 CSS 那么如何在以下 JS 代码中添加
  • CSS 3假3D立方体在2个盒子之间旋转

    我使用 css 实现了翻转旋转 flip card position relative z index 1 webkit perspective 1000px moz perspective 1000px o perspective 100
  • 带切边、边框和透明背景的 Div

    我一直在试图弄清楚如何在 CSS 中制作一个视觉上看起来像这样的自定义形状 拥有以下财产background rgba 44 44 48 0 9 and border 6px solid rgba 29 30 35 0 9 我的问题是我找不
  • 如何让背景覆盖一个单独的div?

    我正在做一个带有侧菜单的网站 屏幕的 30 是菜单 其余是内容 div的内容 我用COVER的方法放了一张背景图 我用了第一个例子 https css tricks com examples FullPageBackgroundImage
  • Google 自定义搜索引擎 (CSE) 按钮图像丢失/未显示

    After implementing a Google Custom Search Engine CSE and adding their JavaScript code to the Master Page for my site I s
  • 使轮子在IE中旋转

    我有以下使用 JS 和 CSS 旋转轮子的代码 var prefix function if document body style MozTransform undefined return MozTransform else if do
  • 如何考虑折叠边距来计算元素的高度

    我想计算 div 元素的总 高度 考虑到崩溃了 http www w3 org TR CSS2 box html collapsing margins margins http reference sitepoint com css col
  • 通过移动地址栏时,视差背景图像在移动设备上改变大小

    一周以来 我的视差元素一直在碰壁 寻求帮助对我来说是最后的手段 我已经在各种论坛上寻找这些问题的解决方案 但我尝试过的都没有效果 only在移动设备上 chrome 如果您按住触摸屏并继续向下滚动 则在初始屏幕图像之后 会出现一个白条 屏幕
  • 跳过在 Chrome 中不起作用的链接

    首先 我看过上一个问题 https stackoverflow com questions 3572843 skip navigation link not working in google chrome但遗憾的是它似乎没有提供任何解决方
  • 如何在 ReactJS 中将具有属性的 CSS 转换为 MaterialUI 样式

    我有以下 CSS contentEditable true empty not focus before content attr data text 它允许在内容可编辑的 div 中没有内容时显示占位符 我正在使用 Material UI
  • CSS 停止表格行内的分页符

    我试图避免在可能超过一页的 HTML 表的行内出现分页符 我正在使用 Internet Explorer 打印预览以及 BCL EasyPDFSDK 转换为 PDF 来测试这一点 我将以下 CSS 样式以各种组合应用到 td 元素 但对于每
  • 为什么 margin-top: auto 和 margin-bottom:auto 的工作方式与左侧和右侧的对应项不同?

    如果我像这样设置 div 的 CSS margin 属性 div margin left auto margin right auto 我得到一个在页面中水平居中的 div like so http jsfiddle net T8Hnb 但
  • 如何制作 HTML/CSS/JS 变色背景(如 Kahoot.it 那样)

    如何使用 html 和 css 以及可能的 javascript 制作类似于 waht 的颜色变化 褪色背景https kahoot it https kahoot it has 你应该学会检查和获取 keyframes bgcolor 0
  • 具有透明度的颜色输入

    是否可以使用内置选择透明颜色
  • HTML5 拖放 - 没有透明度?

    当我将一个元素拖放到页面上时 该元素会变成 幻影 基本上它获得了一些透明度值 有什么办法可以做到吗opacity 1 看来是做不到了 拖动的元素被放入具有自己的不透明度 低于 1 的容器中 这意味着虽然您可以降低拖动元素的不透明度 但您无法
  • 底部带有三角形的蒙版图像

    我正在尝试找出如何最好地掩盖具有像这样的角度形状的 div 如果在这种情况下顶部 div 将是背景图像 并且两个 div 都是 100 宽度 我看过很多关于如何用圆形遮罩图像的教程 但没有关于如何遮罩红色区域等 div 边框的教程 我知道一
  • 如何使盒子阴影显示在容器中的下一个元素上?

    请看这段代码 http codepen io Varin pen kkGgVd http codepen io Varin pen kkGgVd div class container div class outside2 div clas
  • 使用 php 变量更改 css 类

    这里需要您的帮助 正如标题所示 我正在尝试使用 PHP 变量更改 css 类 所以基本上我想创建一个回显某些代码的循环 但我希望第一个循环中的 div 类有所不同 它应该被隐藏 这是我为使问题变得清晰而编写的简化代码 我不知道错误在哪里 请

随机推荐

  • 如何启用码头登录?

    我正在尝试调试我的情况 其中简单的 ActiveWeb 应用程序未在 Jetty 下运行 它的行为就像不存在任何用于请求处理的类一样 并返回错误 404 问题不在于 ActiveWeb 这是关于杰蒂的 如何发现 Jetty 有一些 Web
  • 谷歌浏览器扩展:如何多次打开新的浏览器窗口?

    我的 Chrome 扩展程序使用这个简单的 JS 打开一个新的浏览器窗口 chrome browserAction onClicked addListener function tab var room new Date getTime w
  • ViewPager 使用视图而不是片段

    I ve a ViewPager现在使用Views代替Fragments显示每个选项卡 每个选项卡都会扩展相同的布局文件 Overview In this ViewPager 我应该将地雷添加为选项卡 因此基本上每个选项卡都对应于一个特定的
  • 如何不使用gopath导入本地包

    我用过GOPATH但对于我当前面临的这个问题 它没有帮助 我希望能够创建特定于项目的包 myproject binary1 go binary2 go package1 go package2 go 我尝试了多种方法 但如何得到packag
  • 无法在 Electron 应用程序中使用 Discord OAuth2

    我正在尝试创建一个 Electron 应用程序 使用 Electron net 和 MVC 并使用 Discord 的 OAuth2 进行用户登录 然而 当加载 OAuth2 页面时 Discord 认为我使用的 Discord 安装已损坏
  • 如何捕获远程系统网络流量?

    我一直在使用wire shark来分析socket程序的数据包 现在我想看看其他主机的流量 因为我发现我需要使用只有Linux平台支持的监控模式 所以我尝试了但我无法捕获在我的网络中传输的任何数据包 列为捕获的 0 个数据包 设想 我有一个
  • 升级到 flutter 3.0.1 后更新 CocoaPods 时出错

    我在用MacBook Pro M1 芯片 OS is MacOS 蒙特利 12 3 1 今天我将flutter从2 5 4升级到3 0 1 我可以在 Android 中完美运行我的项目 但是在 iOS 中我收到以下错误 Launching
  • 关闭 seeds.rb 中的验证

    如何关闭验证Rails 3 2 3 in seeds rb 我做了这个 u1 User create email email protected cdn cgi l email protection password 123 validat
  • 如何使用 pyminizip 在 Python 3.x 中创建临时 ZIP?

    我需要创建一个临时 zip 文件来存储文件 该 ZIP 文件需要加密 所以zipfile不会在这里做的伎俩 该文件将被进一步加密 ZIP 将再次加密为另一个文件 因此压缩文件被用作减小其大小以实现更快的互联网传输以及第一层加密的一种方法 这
  • 使用 setjmp / longjmp 的通信协议和本地环回

    我使用共享内存和共享互斥体编写了一些相对简单的通信协议 但后来我想扩展支持以在使用不同运行时的两个 dll 之间进行通信 很明显 如果你有一些std vector lt int64 gt 和两个 dll 一个 vs2010 一个 vs201
  • Hive “alter table <表名称> 连接”如何工作?

    I have n large 我想要合并的小尺寸 orc 文件的数量k small 大型 orc 文件的数量 这是使用完成的alter table table name concatenateHive 中的命令 我想了解 Hive 是如何实
  • 如何在JSP页面中迭代session?

    如何迭代会话并将每个提交值保留在同一页面直到会话结束
  • GPU 上的高效全对集交集

    I have n集合 有限宇宙的子集 我想计算n n矩阵 其中 I J 条目包含集合交集的基数I并设置J n的顺序是50000 我的想法是将矩阵分割成足够小的块 以便每个条目都有一个线程 每个线程都应该使用以下方法计算交集bitwise a
  • 为什么 UIElement.MoveFocus() 不将焦点移动到 ListBox 中的下一个同级元素?

    我有以下视觉树
  • 访问 Android Stock 浏览器设置

    我想通过代码访问 和更改 库存 Android 浏览器的设置 这可能吗 如果可能的话 如何 是的 这是编程问题 我想通过代码更改它 而不是通过手动单击 对 root 设备执行此操作怎么样 Android 的操作系统级安全模型基本上可以防止这
  • PyQt 允许枚举值和字符串

    在 PySide 中 我可以通过使用获取具有可能 允许的枚举值及其字符串表示形式的字典values属性 例如 QtWidgets QMessageBox StandardButton values items 如何在 PyQt4 PyQt5
  • 为什么禁用的 JavaFX TextArea 的颜色与 TextField 不同

    我正在重新设计 JavaFX 应用程序 但我有一个问题 disabled风格 当我尝试改变 fx text fill and fx opacity settings 文本区域的文本颜色仍然比文本字段稍浅 这是我现在得到的风格 Text Fi
  • AppDelegate.m 用于 FBSDK 和 LinkingManager

    要使用 FBSDK 我需要在应用程序委托中使用此代码片段 BOOL application UIApplication application openURL NSURL url sourceApplication NSString sou
  • 使用学习的人工神经网络来解决输入

    我最近再次深入研究人工神经网络 包括进化和训练 我有一个问题 关于什么方法 如果有的话 可以解决导致目标输出集的输入 这个有名字吗 我试图寻找的一切都会导致我进行反向传播 但这不一定是我所需要的 在我的搜索中 我最接近表达我的问题的是 是否
  • 为什么 tailwind css 类名中有一个反斜杠?

    我正在尝试学习和使用最近非常流行的新实用程序框架 顺风CSS https tailwindcss com 当我使用文档中的说明编译 css 时 我看到很多 css 类名都有冒号 其中 前面有一个反斜杠 这是为什么 是为了让CSS明白有一个