高级

结构条件选择器

结构选择器

  • 没有父选择器
  • 子选择器
    • tailwind预设中有能选择直接子级的
    • windicss可以选择全部后代、所有全部直接子级、所有兄弟
    • 不能在原子化中精确选择某一个标签
      • 因为你可以直接在那个标签写utilities

响应式选择器

  • child::

    响应式pseudo

    梗概

    • 使用响应式前缀来定义不同屏幕尺寸下的样式
    • 可以使用sm、md、lg、xl、2xl等前缀来定义响应式样式

    示例

    <div class="bg-blue-500 md:bg-red-500 lg:bg-green-500 xl:bg-yellow-500">
        <p class="text-white md:text-black lg:text-white xl:text-black">Responsive Text Color</p>
    </div>

    这个示例展示了如何在不同屏幕尺寸下应用不同的背景颜色和文本颜色。在小屏幕(md)上,背景色为红色,文本颜色为黑色;在大屏幕(lg)和超大屏幕(xl)上,背景色分别为绿色和黄色,文本颜色分别为白色和黑色。

    指向原始笔记的链接