使用过Less或者Sass的人都知道,为了方便,可以将css属性值定义为一个变量,这样在其他元素中需要使用的话只需输入变量名就可以了,在css3中支持定制变量。
css3中,定义一个变量需要加前缀“- -”,类似于PHP中的变量需要带一个$。
:root {
--box-color: red;
}
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 元素,除了优先级更高之外,与 html 选择器相同。
上面在:root中定义了一个–box-color:red 变量,变量- -box-color的值为red
在css3中使用变量需要使用一个var();然后将所需的变量写在var()中,注意,使用变量不能少了- -(两个减号)
格式:
元素 {
属性:var(变量名);
}
现在来使用它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:root {
/*定义一个变量--box-color*/
--box-color: red;
}
div {
width: 100px;
height: 100px;
background-color: var(--box-color);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
在body里面添加两个宽高皆为100px的div,然后为这两个div设置背景色,注意background-color的属性值。
运行看看
可以看到,两个div背景色都被设置为了红色
那么问题来了
-
:root代表html元素,而上面所写的两个div都是html的子类(后代),所以,在:root中的定义的变量我们能使用。如果,我们将变量定义在其他元素的作用域({}包围的)中,这个变量还能生效吗?
首先修改上面的代码,添加一个div的兄弟元素p,在p中定义一个变量- -bg-color:yellow,并在div中使用这个变量<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*定义一个变量*/ --bg-color: yellow; } div { /*为了看清,添加一个边框*/ border: 1px solid blue; width: 100px; height: 100px; background-color: var(--bg-color); } </style> </head> <body> <p>我是p</p> <div></div> <br/> <div></div> </body> </html>
运行
可以发现,div的背景色并没有被设置为黄色,这是因为,一个元素定义的变量,只能被自己和自己的后代所使用。 -
在html中定义一个变量 - -bg-color:red; ,在body中定义一个相同的变量 - -bg-color:yellow,那么上面的div会被设置为什么背景色?(提示:css选择器有优先级),这个问题留给你们,自己动手实验实验。