Use of the CSS currentColor variable

Use of the CSS currentColor variable
CSS contains a mysterious variable, which is rarely known and rarely used. It is the crrentColor variable (or CSS keyword, but I think it is better to understand it ). What is it? What are the benefits? Where does it come from? Continue with these questions. The following is an explanation from MDN: currentColor represents the color value applied to the current element. It can be used to apply the current color value to other attributes or other attributes of nested elements. You can understand this. In CSS, you can use the currentColor variable wherever you need to write the color. The value of this variable is the color value of the current element. If the current element does not display a color value in CSS, its color value follows the CSS rule and is inherited from the parent element. It seems that the above three philosophical questions have been solved, but they are still vague. The communication between programmers should be on code. Scenario 1 <p> about? </P> p {color: red;} at this time, the value of <p> label currentColor is red. Scenario 2 <div class = "container"> <p> about? </P> </div>. container {color: #00ff00;} now, we have not specified a color for the <p> label. Its color is inherited from the parent container, that is, the class is the div of the container, in other words, the color of the p tag is #00ff00, and currentColor is directly used to retrieve the color value of the element. Therefore, the currentColor value of the p tag is #00ff00. What if no color is written for the parent element? In fact, it is still the category of CSS rules, and it has little to do with the main character of this article. However, based on the principle that the system will die, we will start to talk about it. If no color is specified for a parent element, its parent element will inherit from the parent element, until the html tag at the root node of the document is not displayed with a specified color, the default color of the browser will be applied ~ <! Doctype html>