可否通过选择父元素为子元素添加属性？hover父元素时设置子元素样式方法

实现方案 #

可以实现，直接通过CSS的后代选择器结合:hover伪类即可满足需求。

你现有的HTML结构如下：

<div>
  <a href="#">Hello</a>
</div>

添加以下CSS代码即可：

/* 匹配处于悬浮状态的div内部所有a标签 */
div:hover a {
  color: #ff0000; /* 替换为你需要的颜色值即可 */
}

优化建议 #

如果页面存在多个div元素，建议给触发悬浮效果的父div添加专属类名，避免样式污染全局元素：
修改后HTML：

<div class="hover-parent">
  <a href="#">Hello</a>
</div>

对应CSS：

.hover-parent:hover a {
  color: #ff0000;
}

如果效果未生效，检查是否存在更高优先级的CSS规则覆盖了a标签的color属性，调高当前选择器优先级即可解决。

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