CSS attr()函数、var()函数

attr函数

 <style>
        #baidu::after{
            /* 获取href属性值 */
            content: "("attr(href)")";
        }
 </style>
 <a id="baidu" href="https://www.baidu.com">百度</a>

var函数

 <style>
        :root {
            /* 定义--开头的自定义属性 */
            --main-bg-color: coral;
            --main-txt-color: blue;
            --main-padding: 15px;
            --main-font-size:30px
        }

        #div1 {
            /* 使用var函数来插入自定义属性的值 */
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
            padding: var(--main-padding);
            font-size: var(--main-font-size);
        }

        #div2 {
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
            padding: var(--main-padding);
        }
</style>
<body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
</body>
posted on 2022-01-19 15:23  文仲玉  阅读(117)  评论(0)    收藏  举报