CSS's Color property is not available for text display only

Although CSS is not a very complex technology, but even if you are a use of CSS for many years, there will still be a lot of CSS usage/attribute/attribute values you have never used, even never heard of.

For CSS color Properties, it is believed that all Web developers have used it. If you are not a particularly experienced programmer, I believe you may not know that attributes can be used color in addition to text display, but also as other places.

You can start by looking at the following demo:

HTML code

<img alt="Example alt text" width=" height="  $ "><ul>  <li>example list item</li></ul><ol>  <li> Example List item</li></ol>
CSS Code
body {  color:yellow;  Background: #444;  Font-size:20px;  Font-family:arial, sans-serif;  Text-align:center;} UL {  border:solid 2px;  Text-align:left;} OL {  text-align:left;} HR {  Border-Color:inherit;}
Please note that only one attribute is used in the above code, which color is body set to the element yellow . But, as you can see, all the stuff on this page turns yellow, including:

 
 

  
  
 
   
Cannot display the text of a picture alt
 
   
The border of the list element
 
   
The dot in front of the unordered list element
 
   
Number preceding the ordered list element
 
   
and an hr element.
 
  
 
 
Interestingly, this hr element, by default, does not inherit from the body color property, but I use border-color: inherit force to inherit it. This is a very strange feature.
This is said in the CSS specification:
This property declares the foreground color (foreground color) of the element text content. In addition, its value is also used for indirect references elsewhere .... For example, other properties that can accept color values.