CSS specificity example

cssspecificity.css

ul li a {
  color: red;
}

.item {
  color: blue;
}

/* item will win! */

cssspecificity.html

<ul>
  <li> <a href="#">Home</a> </li>
  <li> <a class="item" href="#">About</a> </li> /* link color will be BLUE */
  <li> <a href="#">Foo</a> </li>
</ul>

cssspecificity1.css

ul#nav li a {
  color: red;
}

.item {
 color: blue;
}

cssspecificity1.html

<ul id="nav">
  <li> <a href="#">Home</a> </li>
  <li> <a class="item" href="#">About</a> </li> /* color will be red */
  <li> <a href="#">Foo</a> </li>
</ul>