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

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>

解决方法:

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

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