结构条件选择器
- child::
结构条件选择器
- father::tailwind使用指南
- 能对针对父级或兄弟或子标签的某些条件做选择
- 如能把父级的定义的特定类存在与否作为条件
详见
Handling Hover, Focus, and Other States - Tailwind CSS
指向原始笔记的链接
结构选择器
- 没有父选择器
- 子选择器
- 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)上,背景色分别为绿色和黄色,文本颜色分别为白色和黑色。
指向原始笔记的链接