CSS变量及其使用方法

在 css 中引入自定义变量可以让我们更加灵活地控制样式，让样式的重复性更强，同时也让CSS更加易于维护。

什么是CSS变量？

CSS变量是一种方便使用的抽象概念，在编写样式时可以使用这些变量来表示一些常见的值，如颜色、字体大小等。这些变量可以在整个页面的任意地方使用，从而增加了 CSS 的灵活性。

使用CSS变量的好处

1.方便维护

如果样式中多次使用了相同的值，使用 CSS 变量可以避免出现重复的代码，简化代码结构，易于维护。

2.提高灵活性

同一个变量可以在页面中的多个位置使用，只需要更新该变量的值，就可以同时更新关联的所有样式规则。这意味着我们可以在不同的页面上使用相同的变量，在不同的样式规则中修改这些变量，而不需要多次调整样式。

3.提高效率

CSS 变量允许开发者重复使用相同的值，这样可以缩短样式表的长度，同时也加快了加载速度，提升了用户体验。

使用CSS变量的方法

1.定义变量

我们可以通过:root伪类来定义一个全局变量。:root表示文档的根元素，即html元素。同时，每个CSS变量都要以双横线开头，如--color。

:root { --color: #fff; --fontsize: 16px; }

2.使用变量

我们可以通过var()函数来引用变量。使用var()函数时，需要将变量名传入函数。

p { color: var(--color); font-size: var(--fontsize); }

这里的p表示应用样式的元素；color和font-size是样式规则的属性；var()中引用的就是我们定义的变量。

为什么CSS选择器只获取第一层为关键字？

CSS选择器是一种特殊的语法，在规定样式时，可以通过选择器来精确地选中某个或某些HTML元素。但选择器并不适用于所有情况，在处理复杂的HTML结构时，往往会出现“选不中”的情况，CSS选择器只获取第一层为关键字就是其中之一。

CSS选择器默认只适用于指定元素的子元素，而不适用于后代元素。当HTML文档结构层级变得复杂时，我们给元素添加类或ID来精确地控制样式的时候，CSS选择器只会获取符合关键字的第一层元素。

比如下面这个结构：

如果我们想要选中class为container的元素的子元素，我们可以使用以下方式：

.container ul { /* todo */ }

但如果我们想要选中class为container的元素的子元素中的class为item的元素，我们需要改变选择器的写法。

容易出现的错误是：

.container .item { /* todo */ }

这种选择器只会选中class为container的元素下的第一层class为item的元素。正确的写法应该这样：

.container > ul > .item { /* todo */ }

只有这样才能准确地选中相应的元素。

总之，CSS变量和选择器都是值得我们学习和掌握的CSS技能，只有熟练掌握它们的使用方法，才能在Web开发中更加灵活地控制样式、节省代码，提高工作效率。