CSS 是前端開發中不可缺少的技能，而對于 CSS 的學習，必不可少的是 CSS 的屬性。CSS 屬性有很多，其中也有一些比較高級的屬性，下面就讓我們來看看 CSS 最高級屬性。

/*   CSS 最高級屬性   */
/* 1. calc() */
/* 這個屬性簡單說，就是一個計算器 */
/* 使用 calc() 函數，可以在 CSS 中進行簡單的數學運算 */
width: calc(100% - 40px);
/* 2. var() */
/* var() 函數可以創建自定義屬性 */
/* 使用 var() 函數，可以在 CSS 中使用自定義的變量 */
:root {
--font-size: 15px;
}
p {
font-size: var(--font-size);
}
/* 3. custom properties for cascading variables (繼承變量的自定義屬性) */
/* 使用 :root 定義全局變量 */
/* 在子元素中定義相同的變量，如果沒有定義會繼承父元素中的相同變量 */
:root {
--color: red;
}
.container {
--color: blue;
color: var(--color);
}
.inner {
color: var(--color);
}
/* 4. nth-child() */
/* 使用 nth-child()，可以選擇第 n 個子元素 */
/* 也可以使用 even 與 odd，來選擇所有偶數/奇數子元素 */
/* 非常適合表格等元素的樣式設計 */
tr:nth-child(odd) {
background-color: #f2f2f2;
}
/* 5. :not() */
/* :not() 可以選擇除了某個元素以外的所有元素 */
/* 例如，下面的代碼將選擇所有不是 p 元素的元素 */
:not(p) {
color: red;
}

以上就是 CSS 最高級屬性的介紹了，掌握這些屬性之后，可以大大提升 CSS 的效率和設計水平。