CSS样式继承与hover伪类的作用范围详解
本文分析CSS选择器和样式继承中一个常见问题：父元素的hover伪类为何有时无法影响子元素样式？
问题描述： 一个 这并非 立即学习“前端免费学习笔记（深入）”； 解决方案： 要使 方法一：显式设置 方法二：利用 通过以上方法，即可精确控制包含一个元素。CSS中，元素字体颜色设为黄色，元素的hover伪类设为红色字体颜色。鼠标悬停在上时，只有外文本变红，内文本仍为黄色。这是为什么？尤其当元素不设置颜色属性时，的hover伪类会影响，但一旦设置了颜色，则失效。
hover伪类优先级问题，而是CSS继承机制。color属性是继承属性，子元素未显式定义color时，继承父元素的color值。因此，应用hover伪类改变颜色后，若未设置color，它会继承新的红色color。但一旦设置了自己的color（例如黄色），它便拥有自己的color值，不再继承父元素。所以，即使应用hover伪类改变颜色，颜色保持不变。元素在悬停时也变红，有两种方法：
hover状态下的颜色：p {
color: yellow;
}
div:hover,
div:hover p {
color: red;
}
not伪类，控制非悬停状态下的颜色：div:not(:hover) p {
color: yellow;
}
div:hover {
color: red;
}
元素在元素悬停时的颜色变化。
