css利用id和class来控制元素样式技巧总结

   现在有这么一个实例要求：

   1）画五个盒子，分别用红、紫、橙、绿、蓝字体颜色来表示；

   2）鼠标点击其中一个盒子时，边框加粗并显示与盒子字体颜色一致的颜色；

   效果如下图：

   

                       （图1）盒子效果图

   下面是具体的实现思路：

   一、html内容构建

     首先利用html内容表达五个盒子内容，代码如下：

<ul id='levelGroup'>

    <li id='level1' >红</li>
    <li id='level2' >紫</li>
    <li id='level3' >橙</li>
    <li id='level4' >绿</li>
    <li id='level5' >蓝</li>

 </ul>

  二、原始样式实现