Tailwind CSS中div内锚点hover效果异常原因咨询

1. 给<a>标签加hover时背景色不生效的原因 #

<a>标签默认是行内元素，它的宽高仅由自身内容决定，不会撑满子元素<h3>的块级区域。当你给<a>设置hover:bg-blue-500时，背景色只会出现在<a>自身的行内空间里，而<h3>是块级元素，视觉上完全覆盖了<a>的背景，所以看起来背景色没生效。
而text-white和font-bold是可继承的样式，<h3>会继承<a>的hover样式，所以这两个效果能正常显示。

2. 给<div>标签加hover时文字颜色异常的原因 #

<h3>作为标题元素，浏览器默认会给它设置文字颜色（通常是黑色），这个默认样式的优先级高于从父元素继承来的样式：

• 当<h3>没自己设置文字颜色时，hover状态下它会继承<div>的text-white，所以颜色生效；
• 一旦<h3>自己设置了文字颜色，这个自定义样式的优先级比继承的更高，所以text-white完全失效。
  而背景色和字体加粗，<div>是块级元素，hover时背景色会填充自身区域，font-bold也能正常继承给<h3>，所以这两个效果正常。

3. 给<h3>标签加hover时所有效果正常的原因 #

<h3>是块级元素，设置的hover:bg-blue-500会填充它自身的整个区域，视觉上能直接看到；text-white和font-bold是直接作用在<h3>上的样式，不存在继承优先级的问题，所以所有效果都能正常生效。

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