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

hlj184

于 2016-06-04 13:23:35 发布

阅读量1.7w

点赞数 2

分类专栏： web前端文章标签： css class id html技巧

本文链接：https://blog.csdn.net/hlj184/article/details/51582733

版权

本文总结了如何使用CSS的id和class来控制HTML元素的样式，以实现特定的颜色和交互效果。通过实例展示了创建五个不同颜色的盒子，并在点击时边框加粗且颜色变化。文章还探讨了代码优化，指出通过合理设计class避免繁琐的JS操作，提倡使用一个通用的selected类结合id来实现不同元素的交互样式，降低代码复杂性和提高效率。

摘要由CSDN通过智能技术生成

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

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>

二、原始样式实现