CSS 中的这两个选择器有什么区别？

Question

我对 CSS 中的这个选择器有疑问。

有什么区别:

.dropdown:hover .dropbtn {background-color: #3e8e41;}

和

.dropdown:hover, .dropbtn {background-color: #3e8e41;}

我不明白为什么在第一个例子中我们不使用逗号。用逗号和不用逗号有什么区别

Answer 1

嗯，按照下面的代码片段：

.dropdown:hover .dropbtn {background-color: #3e8e41;} 确实意味着，当鼠标悬停在 .dropdown 上时，子元素 .dropbtn 应该改变它的颜色
.dropdown:hover, .dropbtn {background-color: #3e8e41;}。如果.dropdown:hover，那么它的颜色应该是#3e8e41，并且.dropbtn的颜色总是应该是#3e8e41。

所以不同之处在于，第一个在鼠标悬停时选择其子项，并应用颜色，而第二个将始终将颜色应用于 .dropbtn，而不是鼠标悬停在 .dropdown 上或不在 .dropdown 上。

.sample:hover span {
  background-color: #3e8e41;
}
.sample:hover,
span {
  background-color: red;
}

<div class="sample">
  Hellow
  <span>Hello</span>
</div>

<div>
  Hellow
  <span class="sample">Hello</span>
</div>

Answer 2

.dropdown:hover, .dropbtn {background-color: #3e8e41;} 属性将应用于两个 classes。

.dropdown:hover .dropbtn {background-color: #3e8e41;} 属性仅应用于 .dropbtn class 元素，当它是前者 class

的后代时

What is the difference between this two selectors in CSS?