如何合并.card:not(:hover)下的多个子元素CSS选择器？

嘿，我来帮你搞定这个CSS代码合并的问题！

你遇到的问题是因为对CSS逗号分隔选择器的逻辑理解有点偏差——逗号在CSS里是分隔独立选择器的，所以你写的：

.card:not(:hover) .movePrevCarousel , .moveNextCarousel{ 
  /* Used to make the button appear, when mouse hover*/ 
  opacity: 0; 
}

实际上等价于两个完全独立的规则：

1. 针对.card:not(:hover)下的.movePrevCarousel元素
2. 针对全局所有的.moveNextCarousel元素

这就导致第二个选择器不管.card有没有被hover都会生效，自然达不到你想要的“只有当.card未被hover时，两个按钮都透明”的效果。

正确的合并写法有两种： #

1. 兼容所有现代浏览器的传统写法

重复父选择器，用逗号分隔两个完整的子选择器：

.card:not(:hover) .movePrevCarousel,
.card:not(:hover) .moveNextCarousel {
  /* Used to make the button appear when mouse hovers */
  opacity: 0;
}

2. 更简洁的现代写法（使用:is()伪类）

如果你的项目不需要兼容IE这类旧浏览器，可以用:is()伪类来简化代码，它会把括号内的所有选择器都绑定到前面的父选择器上：

.card:not(:hover) :is(.movePrevCarousel, .moveNextCarousel) {
  /* Used to make the button appear when mouse hovers */
  opacity: 0;
}

两种写法都能实现你想要的效果：当鼠标没有hover在.card上时，两个按钮都透明；hover时按钮显示出来。

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