CSS中带逗号与不带逗号的两种选择器写法有什么区别？

两者是完全不同的选择器语法，作用逻辑天差地别：

• 空格是后代选择器：表示选中前者内部所有匹配的后代元素
• 逗号是选择器分组符：表示同时选中逗号前后所有匹配的元素，相互之间没有从属关系

第一段代码（无逗号，空格分隔） #

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

触发逻辑：
只有当鼠标悬浮在.dropdown类元素上的时候，才会选中这个.dropdown元素内部所有带.dropbtn类的后代元素，给它们设置背景色。悬浮其他元素、或者.dropbtn不在.dropdown内部的时候，这个样式都不会生效。

第二段代码（有逗号分隔） #

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

这里逗号把两个选择器分开，相当于同时写了两段独立的样式规则，等同于：

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

触发逻辑：

1. 鼠标悬浮在.dropdown元素上时，这个.dropdown元素自身会变成指定背景色
2. 所有带.dropbtn类的元素，不管在什么位置、不管有没有触发悬浮，默认就是这个背景色

简单总结：需要实现「父元素触发交互时修改子元素样式」的效果就用空格，需要给多个无关联的元素复用同一段样式就用逗号。

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