如何在使用only-child时避免悬停样式

Question

我使用独子选择器来显示特定的背景颜色,使用悬停样式来显示不同的背景颜色.问题是,当只有一个孩子时,我不希望悬停样式工作.我怎样才能做到这一点？

1)没有红色背景,但是当我们悬停时它会变为绿色背景

.report p:only-child {
  background: red;
}

.report p:hover {
  background: green;
}

<div class="report">
  <p>Test1</p>
  <p>Test2</p>
</div>

2)红色背景,但我们悬停时没有绿色背景

.report p:only-child {
  background: red;
}

.report p:hover {
  background: green;
}

<div class="report">
  <p>Test1</p>
</div>

Answer 1

很简单,只需将你已经拥有的两个伪类组合起来:)

.report p:only-child,
.report p:only-child:hover{
    background: red;
}
.report p:hover{
    background: green;
}