在 CSS 选择器中，逗号（,）、空格（ ）和没有空格直接连续写（无空格）用于不同的目的，它们的区别如下：
逗号（,）：
逗号用于组选择器（Grouping selectors），它表示选择多个不同的选择器，并且为它们应用相同的样式规则。逗号分隔的选择器可以匹配不同的元素，但只有当元素匹配其中一个选择器时，样式才会被应用。
h1, h2, .title {color: blue;
}
/* 这会选择所有的 h1 和 h2 元素，以及任何类名为 "title" 的元素，并给它们设置蓝色文字 */
空格（ ）：
空格用于后代选择器（Descendant selector），它表示选择的是匹配左侧选择器的元素的后代（子、孙、曾孙等后代）中匹配右侧选择器的元素。空格分隔的选择器可以匹配同一棵 DOM 树中，具有特定层级关系的元素。
.container .box {width: 100px;
}
/* 这会选择类名为 "container" 的元素内部所有类名为 "box" 的元素，并给它们设置宽度为 100px */
没有空格直接连续写（无空格）：
在 CSS 选择器中，元素必须同时满足所有连续写的选择器条件才能被选中。值得注意的是，类选择器的顺序并不重要，只要元素的类名中包含所有类选择器的条件即可。
button.primary.large {padding: 10px;
}
/* 这会选择所有同时具有类名 "primary"、"large" 的 button 元素，并给它们设置 padding 为 10px */以下是各个按钮元素的类名和选择器匹配的情况：<button class="primary large ">Click me</button>
/*可以匹配 button.primary.large。*/<button class="primary large myclass">Click me</button>
/*可以匹配 button.primary.large。因为同时具有 primary 和 large 这两个类名，即使按钮还包含了额外的类名*/<button class="large myclass primary">Click me</button>
/*可以匹配 button.primary.large。因为同时具有 primary 和 large 这两个类名，即使它们在类属性中以不同的顺序出现。*/<button class="primary myclass">Click me</button>
/*不能匹配 button.primary.large。，因为缺少 large 类名。CSS 选择器 button.primary.large 要求按钮必须同时具有 primary 和 large 两个类名才会应用相应的样式。*/
