Tailwind CSS搭配DaisyUI时如何修改Dropdown下拉项的hover及active颜色

失效原因 #

• 交互对象匹配错误：点击下拉项时实际触发点击事件的是<li>内部的<a>标签，你之前的样式只绑定了父级<li>的:active伪类，无法正确匹配点击状态
• 样式优先级不足：DaisyUI内置的.menu li a系列默认样式优先级更高，就算父级触发了状态也会覆盖你写的自定义样式

解决方法 #

方案1：直接用Tailwind内置修饰符（无需额外写CSS，推荐） #

Tailwind 3.0+默认支持active:状态修饰符和任意色值写法，直接给<a>标签加对应类即可，代码如下：

<div class="dropdown">
    <div tabindex="0" class="m-1 btn clickables btn-green shadow">
        <p class="text-medium">Testing</p>
    </div>
    <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-white text-black rounded-box w-52 text-sm">
        <li class="rounded hover:bg-gray-300">
            <!-- 直接给a标签添加激活态样式，可同时修改文字颜色避免对比度不足 -->
            <a href="page-one.html" class="active:bg-[#0B6339] active:text-white">Protecting your privacy</a>
        </li>
    </ul>
</div>

方案2：调整自定义CSS选择器 #

如果你坚持用自定义类写CSS，修改选择器匹配<a>标签的激活态即可：

/* 匹配下拉项内a标签的点击激活态，权重足够覆盖默认样式 */
.dropdown-active a:active {
   background-color: #0B6339 !important; 
   color: #fff !important;
}

配套HTML代码无需大改，和你之前的写法保持一致即可。

内容的提问来源于stack exchange，提问作者P. Z.