css公共变量 |css的选择器类型区别

:root {
/** 定义公共变量 */
--primary-color: #007bff;
--font-size: 16px;
}
h1 {
font-size: var(--font-size);
color: var(--primary-color);
}
a {
color: var(--primary-color);
text-decoration: none;
}
button {
background-color: var(--primary-color);
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
}

在上面的例子中，大家定义了两个公共变量：primary-color 和 font-size。这些变量可以在整个样式表中使用，从而方便地修改全站的主颜色和字体大小。在应用样式时，通过使用 var() 函数将公共变量的值应用到具体的元素上。

公共变量不仅可以提高样式的可维护性，也可以提高其可读性。通过给颜色、字体大小等声明命名，大家能够更直观地理解样式的意义和逻辑。这对于协作开发和代码维护都是非常有益的。

总之，通过使用 CSS 公共变量可以使样式更加模块化、可重用，并且易于维护。如果您还没有尝试过使用变量来管理样式，请务必试一试，相信你会喜欢上这种方式。