如何在使用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;
}

这是一个小提琴：https://jsfiddle.net/5ccjphjj/

Answer 2

更新您的选择器以另外使用非选择器，如下所示

.report p:not(:only-child):hover{
    background: green;
}

Answer 3

尝试.report p:not(:only-child):hover

Stack Snippet

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

.report p:not(:only-child):hover {
  background: green;
}

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

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