css3中自定义变量

左手的ㄟ右手 2023-08-17 16:56 131阅读 0赞

使用过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的**属性值**。  
运行看看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]  
可以看到，两个div背景色都被设置为了红色  
那么问题来了

1.  :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>
    
    运行  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]  
    可以发现，div的背景色并没有被设置为黄色，这是因为，一个元素定义的变量，只能被自己和自己的后代所使用。
2.  在html中定义一个变量 **- -bg-color:red;** ,在body中定义一个相同的变量 **- -bg-color:yellow**，那么上面的div会被设置为什么背景色？（提示：css选择器有优先级），这个问题留给你们，自己动手实验实验。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]: /images/20230809/524ff796ce75428e96d353d8000d9483.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230809/24f37e777a54402a90dc0a602ca2eaf7.png