css3中自定义变量

使用过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(变量名);
}

现在来使用它


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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的属性值
运行看看
css3中自定义变量_第1张图片
可以看到,两个div背景色都被设置为了红色
那么问题来了

  1. :root代表html元素,而上面所写的两个div都是html的子类(后代),所以,在:root中的定义的变量我们能使用。如果,我们将变量定义在其他元素的作用域({}包围的)中,这个变量还能生效吗?
    首先修改上面的代码,添加一个div的兄弟元素p,在p中定义一个变量- -bg-color:yellow,并在div中使用这个变量

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            p {
            
                /*定义一个变量*/
                --bg-color: yellow;
            }
    
            div {
            
                /*为了看清,添加一个边框*/
                border: 1px solid blue;
                width: 100px;
                height: 100px;
                background-color: var(--bg-color);
            }
        style>
    head>
    <body>
    <p>我是pp>
    <div>div>
    <br/>
    <div>div>
    body>
    html>
    

    运行
    css3中自定义变量_第2张图片
    可以发现,div的背景色并没有被设置为黄色,这是因为,一个元素定义的变量,只能被自己和自己的后代所使用。

  2. 在html中定义一个变量 - -bg-color:red; ,在body中定义一个相同的变量 - -bg-color:yellow,那么上面的div会被设置为什么背景色?(提示:css选择器有优先级),这个问题留给你们,自己动手实验实验。

你可能感兴趣的:(前端,css3,css3新特性,css)