Edit in JSFiddle

<h2>CSS Specificity</h2>

<ul>
    <li id="item1" class="item">
        <div id="color1" class="color" style="background-color:red;">#1</div>
    </li>
    <li id="item2" class="item">
        <div id="color2" class="color">#2</div>
    </li>
    <li id="item3" class="item">
        <div id="color3" class="color">#3</div>
    </li>
    <li id="item4" class="item">
        <div id="color4" class="color">#4</div>
    </li>
    <li id="item5" class="item">
        <div id="color5" class="color">#5</div>
    </li>
    <li id="item6" class="item">
        <div id="color6" class="color">#6</div>
    </li>
    <li id="item7">
        <div id="color7" class="color">#7</div>
    </li>
    <li id="item8">
        <div id="color8">#8</div>
    </li>
</ul>
/* Specificity formula: style|id|class|tag 
   Note: Every selector below selects a "div".
*/

/* For div with id = c1, style attribute is present so,
   Specificity : 1|0|0|0 = 1000
   hence, it's color is RED.
*/

div {
    /* Specificity : 0|0|0|1 = 0001 */
    background-color : black;
}
/* Below classes are used for list formatting and
   have nothing to do with specificity we are discussing.
*/
 div {
    width: 100px;
    height: 30px;
    border : 1px solid silver;
    color : white;
    font-weight: bold;
    text-align: center;
}
li {
    list-style: none;
}