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

//html代碼
<div class="main">
<div class="card">
<p class="title">標(biāo)題1</p>
<p class="content">正文1</p>
</div>
<div class="card">
<p class="title">標(biāo)題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元素進(jìn)行關(guān)聯(lián)。這樣就可以通過給“main”設(shè)置樣式來影響所有的“card”元素，而不用一個一個地為它們添加樣式。

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

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