CSS类意外重叠问题：TD hover文本未变白的解决方案咨询

问题根源是你给<p>标签设置的颜色类优先级高于父元素td的hover样式，子元素不会继承被自身样式覆盖的属性。修改CSS，直接指定hover状态下<p>的颜色即可：

修改后的CSS代码：

td {
  text-align: center;
}

table {
  width: 100%;
  font-size: 35px;
  font-family: Arial;
  font-weight: bold;
}

.blackBorder {
  border: 1px solid black;
}

p.redColor {
  color: red;
}

p.blueColor {
  color: blue;
}

.lightGreenBackground {
  background-color: #b5f79e;
}

.hover:hover {
  background-color: black;
}

/* 选中hover状态下td内的所有p元素 */
.hover:hover p {
  color: white;
}

原理说明 #

• p.redColor和p.blueColor的选择器优先级比td.hover:hover高，所以<p>会优先使用自身的颜色样式，忽略父元素的color设置。
• 通过.hover:hover p这个更具体的选择器，直接给hover状态下的<p>设置颜色，就能覆盖原来的颜色类样式，无需使用!important。

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