<> 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