CSS有一個(gè)非常有趣的功能：自定義屬性，也稱為變量。這是一種在CSS中定義值，以便在整個(gè)樣式表中重復(fù)使用的方法。不過(guò)在前面加上--就可以定義自定義CSS屬性，但是有時(shí)候我們希望將它隱藏起來(lái)，以使代碼更加清晰簡(jiǎn)潔。那么如何在CSS中隱藏自定義屬性呢？

:root {
--main-color: blue; /* 定義主要顏色 */
--secondary-color: green; /* 定義副顏色 */
--hidden-color: red; /* 隱藏顏色 */
}

以上代碼展示如何在:root選擇器中定義自定義屬性，其中--hidden-color屬性被定義為紅色。然而，我們并不想讓用戶或其他開發(fā)人員能夠看到或使用這個(gè)隱藏的顏色。這時(shí)候我們可以使用CSS的:not偽類來(lái)實(shí)現(xiàn)。

:root {
--main-color: blue;
--secondary-color: green;
--hidden-color: red;
}
/* 隱藏自定義屬性 */
:not([hidden]):root {
--hidden-color: inherit;
}

在上面的代碼中，我們使用:not([hidden])選擇器來(lái)篩選掉所有有hidden屬性的元素，然后使用:root來(lái)添加我們的自定義屬性。因?yàn)槲覀冊(cè)O(shè)置了--hidden-color屬性的繼承值為inherit，在沒(méi)有hidden屬性的元素中，它會(huì)繼承自根元素并將其隱藏起來(lái)。

/* 使用屬性 */
h1 {
color: var(--main-color);
background-color: var(--secondary-color);
border: 1px solid var(--hidden-color);
}

最后，使用var()函數(shù)可以方便地調(diào)用我們定義的自定義變量，并在h1元素中應(yīng)用三種顏色：主要顏色，副顏色和隱藏顏色。