SOURCE

<ul>
    <li>Default <a href="#">link</a> color</li>
    <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
    <li class="my-class-2">Reset the <a href="#">link</a> color</li>
    <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>
    
<blockquote>
       <p>This blockquote is styled</p>
 </blockquote>

<blockquote class="fix-this">
  <p>This blockquote is not styled</p>
</blockquote>


<div id="outer" class="container">
    <div id="inner" class="container">
        <ul>
            <li class="nav"><a href="#">One</a></li>
            <li class="nav"><a href="#">Two</a></li>
        </ul>
    </div>
</div>
    


  

body {
    color: green;
}
a{
  color:red;
}         
.my-class-1 a {
    color: inherit;
}
          
.my-class-2 a {
    color: initial;
}       
.my-class-3 a {
    color: unset;
}

 blockquote {
    background-color: red;
    border: 2px solid green;
}
        
.fix-this {
    all:unset;
}


/* specificity: 0101 */
#outer a {
    background-color: red;
}
        
/* specificity: 0201 选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“...在...中找到”、“...作为...的一部分”、“...作为...的后代”，但是要求必须从右向左读选择器*/
#outer #inner a {
    background-color: blue;
}

/* specificity: 0104 */
#outer div ul li a {
    color: yellow;
}

/* specificity: 0113 */
#outer div ul .nav a {
    color: white;
}

/* specificity: 0024 */
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/* specificity: 0023 */
div li:nth-child(2) a:hover {
    border: 10px dashed black;
}

/* specificity: 0033 */
div div .nav:nth-child(2) a:hover {
    border: 10px double black;
}

a {
    display: inline-block;
    line-height: 40px;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    width: 200px;
    margin-bottom: 10px;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}