CSS是一門用于網頁設計的語言，其中包含了大量的樣式規則來定義頁面元素的外觀和布局。其強大的選擇器語法可以讓我們輕松地對DOM層級結構中的元素進行選擇和排版。在CSS中，我們可以使用子節點和孫子節點來精確地選擇目標元素，達到我們想要的樣式效果。

.parent {
background-color: #f0f0f0;
}
.parent >.child {
font-size: 16px;
}
.parent .grandchild {
color: blue;
}

以上是一個例子，我們可以看到，選擇器中使用了子節點選擇符和后代選擇符：

• 子節點選擇符(>)：它可以選擇作為父元素直接子元素的元素。
• 后代選擇符：它可以選擇任意深度的子元素，包括子元素的子元素。

當我們在樣式表中使用這些選擇器時，我們可以修改它們的樣式。在上面的例子中，我們選中了class為parent的元素，并設置了它的背景色為灰色。緊接著，我們使用子節點選擇器(>)來選中它的子元素class為child的元素，并設置了其字體大小為16px。最后，我們使用后代選擇器來選中class為grandchild的元素，它是parent的子孫元素，我們將它的顏色設置為藍色。

這就是CSS中子節點和孫子節點選擇器的基本使用方法。通過這些選擇器和其他的CSS特性，我們可以精確地控制頁面樣式來達到我們的設計目標。