©2020-2024 ioDraw All rights reserved
<> brief introduction
* Custom attributes , It contains values that can be reused throughout the document . Set value by custom attribute tag , from var() Function to get the value ,
* Custom attributes are constrained by cascading , And inherit its value from its parent .
<> Basic Usage
Declare a custom attribute , Attribute names need to be marked with two minus signs （–） start , Attribute value can be any valid CSS value . Like other attributes , Custom attributes are also written in the rule set , as follows ：
el { --main-color: red; }
be careful , The selector specified by the rule set defines the visible scope of the custom attribute . The usual best practice is to define in the root pseudo class
:root lower （ Look at the root node of the project , Specific situation specific analysis ）, So you can HTML Access it anywhere in the document ：
:root { --main-color: red; }
<> Inheritance of custom attributes
Custom attributes will inherit . This means that if on a given element , No value set for this custom attribute , The value on its parent element will be used . Look at this paragraph HTML：
<div class="one"> <div class="two"> <div class="three"></div> <div class="four"
></div> </div> </div> .two { --test: 10px; } .three { --test: 2em; }
In this case , var(–test) The results are ：
* For elements class=“two” ：10px
* For elements class=“three” ：2em
* For elements class=“four” ：10px （ Inherit from parent attribute ）
* For elements class=“one” ： invalid value , Will become the default value of the custom attribute
* val(), There are two parameters , The first parameter is the set value （ variable ）, Default value of the second parameter , Variables defined are case sensitive
Technology