One
Two
/* 1. specificity: 1-0-1 */ #outer a { background-color: red; } /* 2. specificity: 2-0-1 */ #outer #inner a { background-color: blue; } /* 3. specificity: 1-0-4 */ #outer div ul li a { color: yellow; } /* 4. specificity: 1-1-3 */ #outer div ul .nav a { color: white; } /* 5. specificity: 0-2-4 */ div div li:nth-child(2) a:hover { border: 10px solid black; } /* 6. specificity: 0-2-3 */ div li:nth-child(2) a:hover { border: 10px dashed black; } /* 7. specificity: 0-3-3 */ 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; }
<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>