在CSS中，我們可以使用類選擇器來為一組元素設置相同的樣式。而在類中類選擇器的幫助下，我們還可以更精細地將這些元素分組，并添加不同的樣式。

//html代碼
<div class="main">
<div class="card">
<p class="title">標題1</p>
<p class="content">正文1</p>
</div>
<div class="card">
<p class="title">標題2</p>
<p class="content">正文2</p>
</div>
</div>
//css代碼
.main .card {
margin-bottom: 20px;
}
.title {
font-size: 20px;
color: #333;
}
.title:hover {
text-decoration: underline;
}
.card .content {
font-size: 16px;
color: #666;
}
.card:hover {
box-shadow: 0px 0px 5px #aaa;
}
.card:hover .title {
color: red;
}

在這個示例中，我們使用了嵌套選擇器，將class為“card”的div元素選中，并將它們與class為“main”的div元素進行關聯。這樣就可以通過給“main”設置樣式來影響所有的“card”元素，而不用一個一個地為它們添加樣式。

我們還使用了后代選擇器來將“title”和“content”元素與“card”元素關聯起來，并使用了class選擇器來為“title”和“content”指定不同的樣式。在“card”元素上添加:hover偽類選擇器，可以在鼠標懸停時改變這個元素的樣式。

最后，使用了類中類選擇器來改變“card”元素的標題顏色。在“card”元素上添加:hover偽類選擇器后，可以為這個元素的標題添加新的樣式。