在 Web 開發中，我們經常需要定義不同的 CSS 樣式來美化我們的網頁，從而讓網頁更加美觀、易于閱讀和使用。但是，當我們在寫 CSS 樣式時，卻會出現一個問題：如何確保 CSS 樣式只對我們想要樣式的元素生效？在這種情況下，全局 CSS 作用域就是一個重要的概念。

CSS 樣式表中的樣式規則具有全局作用域，這意味著它們可以影響到頁面中的任何元素。在某些情況下，這是有用的，但在其他情況下，它可能會導致問題。一個常見的例子是在開發 Web 應用程序時，我們使用了一些庫和框架，這些庫和框架可能會定義一些全局樣式規則，以實現一些共享的樣式效果。如果我們自己的 CSS 樣式也在全局范圍內定義，則有可能發生某些元素樣式被“篡改”的情況。

為了避免這種情況，我們需要使用一些技術來限制 CSS 樣式的作用域。以下列出了幾個流行的方法：

/* 范圍限制到類 */
.my-class {
color: blue;
font-size: 16px;
}
/* 范圍限制到 ID */
#my-id {
color: red;
font-size: 18px;
}
/* 范圍限制到元素 */
div p {
color: green;
font-size: 14px;
}
/* 范圍限制到后代元素 */
div >p {
color: orange;
font-size: 12px;
}
/* 利用 scoped 屬性限制范圍 */

通過使用這些方法，我們可以顯式地告訴瀏覽器哪些元素會受到 CSS 樣式的影響，從而確保樣式表中的樣式規則只對指定的元素或元素集合生效。這是一個非常有效的方式來避免 CSS 樣式的全局作用域，以確保我們的網頁的樣式良好地組織和呈現。