使用Tailwind任意变体结合屏幕尺寸实现多端子元素样式控制

你的需求是结合Tailwind任意变体与屏幕断点实现不同尺寸下子元素的背景色变化，但当前代码存在几个关键问题：

1. 断点未正确绑定任意变体：红色背景的样式没有添加sm:前缀，导致在所有屏幕尺寸下都会生效，覆盖其他断点的样式。
2. 选择器逻辑不准确：使用:not(:first-of-type)来选中最后3个子元素，虽然在4个子元素的场景下结果巧合正确，但逻辑上应该用:nth-last-of-type(-n+3)直接选中最后3个，更严谨且适配子元素数量变化的情况。
3. LG断点样式作用对象错误：你把lg:bg-yellow-200加在了父容器上，会让整个父容器变成黄色，而不是所有子元素。

修正后的代码 #

<div className="grid grid-cols-4 gap-2 
  sm:[&>div:nth-last-of-type(-n+3)]:bg-red-500 
  md:[&>div:nth-last-of-type(-n+2)]:bg-blue-200 
  lg:[&>div]:bg-yellow-200">
  <div className="col-span-4 md:col-span-2 lg:col-span-1 bg-gray-100">
    <h2>Chapter-1</h2>
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>
  <div className="col-span-4 md:col-span-2 lg:col-span-1 bg-gray-100">
    <h2>Chapter-2</h2>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
  </div>
  <div className="col-span-4 md:col-span-2 lg:col-span-1 bg-gray-100">
    <h2>Chapter-3</h2>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
  <div className="col-span-4 md:col-span-2 lg:col-span-1 bg-gray-100">
    <h2>Chapter-4</h2>
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>
</div>

代码解释 #

• sm断点：sm:[&>div:nth-last-of-type(-n+3)]:bg-red-500 —— 在sm及以上屏幕，选中父元素下最后3个div子元素，设置红色背景。
• md断点：md:[&>div:nth-last-of-type(-n+2)]:bg-blue-200 —— 在md及以上屏幕，选中父元素下最后2个div子元素，设置蓝色背景（会覆盖sm断点的红色，因为md优先级更高）。
• lg断点：lg:[&>div]:bg-yellow-200 —— 在lg及以上屏幕，选中父元素下所有div子元素，设置黄色背景（覆盖之前的颜色）。
• 子元素添加bg-gray-100作为默认中性背景色，确保未被选中的元素有默认样式。

内容的提问来源于stack exchange，提问作者Boq7