指尖上的记忆指尖上的记忆
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub

tailwindcss之分组选择器的使用:

对当前元素的子元素使用:
class="[&_.common-field\_\_input]:!w-[8.75rem]" //这个需要转义下划线(_)
解析:
[&_.common-field__input]:这是 Tailwind 的 “分组选择器” 语法,意味着它将样式应用于 .common-field__input 子元素。& 表示当前元素,_ 表示选择 .common-field__input 子元素,因此这一部分的意思是:当前元素内的 .common-field__input 子元素 将被作用此样式。
  
当前元素使用:
<div class="bg-blue-500 [&:hover]:bg-red-500">Hover me</div>
<div class="[&.active]:bg-green-500">Click me</div>