在前端開發中，css樣式的作用域是一個非常重要的概念。控制css樣式的作用域可以使頁面代碼更加清晰、易于維護。下面我們來介紹一些控制css樣式作用域的方法。

1. 使用id選擇器

#container {
width: 100%;
}

在上面的代碼中，#container就是一個id選擇器，它可以讓我們控制id為container的元素的樣式。使用id選擇器可以很好地控制樣式的作用域，但是id選擇器只能使用一次，因為id在文檔中是唯一的。

2. 使用class選擇器

.container {
width: 100%;
}

在上面的代碼中，.container就是一個class選擇器，它可以讓我們控制class為container的元素的樣式。使用class選擇器可以控制多個元素的樣式，這樣就可以更好地控制樣式的作用域。

3. 使用子選擇器

ul >li {
color: red;
}

在上面的代碼中，>表示子選擇器，它可以讓我們控制ul元素下的直接子元素li的樣式。使用子選擇器也可以控制樣式的作用域，但是要注意子選擇器只能控制直接子元素的樣式。

4. 使用后代選擇器

ul li {
color: red;
}

在上面的代碼中，空格表示后代選擇器，它可以讓我們控制ul元素下的所有子元素li的樣式。使用后代選擇器可以控制多個元素的樣式，但是要注意樣式的作用域可能會擴大。

5. 使用偽類選擇器

a:hover {
color: red;
}

在上面的代碼中，:hover就是一個偽類選擇器，它可以讓我們控制鼠標移動到a元素上的樣式。使用偽類選擇器可以控制一些特定情況下的樣式，但是要注意偽類選擇器只能控制特定的狀態。

通過以上幾種選擇器的應用，我們可以更好地控制樣式的作用域，使得頁面代碼更加清晰、易于維護。