1. 嵌套
CSS中的嵌套是指将一个选择器放在另一个选择器的内部，用以选择内部元素，即将两个选择器组合在一起，这种组合方式被称为嵌套。
例如，下面的CSS代码中，将h1元素设置为红色，将p元素设置为黑色，且只有当p元素是h1元素的子元素时，文本才为粗体：
h1 {
color: red;
}
h1 p {
color: black;
font-weight: bold;
}
这段代码中，选择器h1 p创建了一个包含两个元素h1和p的嵌套，因此只有当p元素是h1元素的子元素时，才会应用颜色和字体方式。
使用嵌套可以使CSS代码更加简洁、易于维护，因为它可以减少选择器的数量，同时可以清晰地表示选择器之间的关系。
但是，如果嵌套太多，就会影响代码的可读性和性能。因此，应该尽量避免过度嵌套。
1.1 嵌套选择器的写法
嵌套选择器的写法可以是任意级别的，下面是几个嵌套选择器的示例：
/* 1级嵌套 */
h1 span {
color: red;
}
/* 2级嵌套 */
.primary .content h2 {
font-weight: bold;
}
/* 3级嵌套 */
#header .nav ul li a {
text-decoration: none;
}
/* 多级嵌套 */
.sidebar .menu ul li ul li a {
color: black;
}
在嵌套选择器中，可以使用任意组合方式。例如：
/* ID选择器 + 类选择器 */
#header .logo {
width: 100%;
}
/* 类选择器 + 子元素选择器 */
.sidebar .menu > ul > li {
margin-left: 10px;
}
/* 子元素选择器 + 后代选择器 */
ul > li .sub-menu a {
font-size: 12px;
}
1.2 嵌套选择器的优先级
当多个选择器同时作用于同一个元素时，可能会产生选择器优先级冲突。在CSS中，选择器的优先级是由四个因素决定的：
!important标记
ID选择器
类选择器、属性选择器和伪类选择器
元素和伪元素选择器
在嵌套中，如果同时存在多个选择器作用于同一个元素，在这些选择器的优先级相同时，以离目标元素最近的选择器为准。
例如，在下面的代码中，p元素会被设置为蓝色和粗体，因为离p元素最近的选择器是h1 p，它的优先级高于h1：
h1 {
color: red;
}
h1 p {
color: blue;
font-weight: bold;
}
2. 分组
在CSS中，分组是指将多个选择器组合在一起，用逗号隔开，来同时选择多个元素并应用相同的样式。
例如，以下CSS代码中，将h1和h2元素一起设置为红色：
h1, h2 {
color: red;
}
使用分组可以将相同规则的样式定义在一起，从而使CSS代码更加简洁清晰。同时，可以减少代码的重复，提高开发效率。
2.1 分组选择器的写法
在分组中，可以将不同类型的选择器组合在一起。以下是一些分组选择器的示例：
/* 元素选择器 */
h1, h2, p {
font-family: Arial, sans-serif;
}
/* 类选择器 */
.header, .footer {
background-color: #f0f0f0;
}
/* ID选择器 + 类选择器 */
#container, .container {
width: 960px;
}
/* 子元素选择器 + 后代选择器 */
ul > li, ul li {
list-style: none;
}
2.2 分组选择器的优先级
在分组中，每个选择器的优先级是独立的，不受其他选择器的影响。因此，分组中选择器的优先级是单独计算的。
例如，在以下代码中，p元素的文本会被应用蓝色，因为p选择器的优先级高于h2选择器：
h2, p {
color: red;
}
p {
color: blue;
}
在分组中，可以将相同的元素类型组合在一起，也可以将不同的元素类型组合在一起，使用分号隔开：
/* 相同类型的元素 */
h1, h2, h3 {
margin-bottom: 10px;
}
/* 不同类型的元素 */
h1, p, a {
font-family: Arial, sans-serif;
}
3. 嵌套和分组的组合应用
嵌套和分组的组合应用可以使CSS代码更加灵活，更容易维护，并且可以避免深度嵌套的问题。
在下面的示例中，使用嵌套和分组的组合应用，将h2元素和类名为.row的元素的margin-bottom和font-size属性设置为相同的值，并将它们组合在一起：
h2,
.row {
font-size: 18px;
margin-bottom: 20px;
}
.row h2 {
font-size: 24px;
margin-bottom: 30px;
}
在上面的代码中，将h2元素和类名为.row的元素分别选择并应用相同的样式，然后使用嵌套选择器来选择类名为.row的元素中的h2元素并再次应用样式。
这种组合应用方式可以使CSS代码更加简洁易读，并且以后再需要修改样式时也更加方便。
3.1 嵌套和分组组合的注意事项
虽然嵌套和分组的组合应用可以使CSS代码更加简洁易读，但是在使用时也需要注意一些问题：
不要将嵌套过多，否则会影响代码的可读性和性能。
不要随意地组合选择器，应该根据实际情况进行选择，以使代码更加易于维护。
在组合中，应该尽量让基本选择器不要太多，以提高选择器的效率。
3.2 嵌套和分组组合的实际应用
下面是一个使用嵌套和分组组合的实际应用示例：
/* 网页布局 */
.container {
width: 960px;
margin: 0 auto;
}
.header, .footer {
height: 80px;
background-color: #f0f0f0;
}
.sidebar {
width: 200px;
float: left;
}
.main {
width: 760px;
float: right;
}
/* 样式 */
h1, h2, h3 {
font-family: Arial, sans-serif;
margin: 10px 0;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
p {
line-height: 1.5;
}
.warning {
color: red;
font-weight: bold;
}
.success {
color: green;
font-weight: bold;
}
在上面的代码中，首先定义了网页布局的样式，然后定义了各种文本元素的样式和两个警告类和成功类的样式。
在嵌套和分组组合应用中，也可以使用Sass和Less等CSS预处理器来简化代码的编写和维护，提高开发效率。
4. 总结
CSS中的嵌套和分组是两种常用的选择器组合方式，可以使CSS代码更加简洁、易于维护。嵌套是将选择器放在另一个选择器的内部，用以选择内部元素；分组是将多个选择器组合在一起，用逗号隔开，来同时选择多个元素并应用相同的样式。
在使用嵌套和分组时，应该注意嵌套的层数应该适当，不要过渡嵌套，同时要根据实际情况进行选择器的组合，使代码更易于维护和阅读。