CSS样式问题（一）：样式冲突问题

昨天在做jQuery动画效果的时候出现了选择器之间样式的覆盖问题，以此记录下

问题回顾：这个动画效果是实现出现和隐藏的功能，点击红色框框的相应选项内容会随着出现和隐藏，根据习惯其实我会将比较少的部分放前面，前端小白要学习的内容果然很多，如果将content的单独部分放前面会出现这样的效果

解决：改变和位置之后终于是自己想要的效果啦~

知识拓展：参考自 https://blog.csdn.net/splendid_can/article/details/53351414
1、样式的层级关系
2、选择器优先级：（!important>）id选择器>class选择器（属性选择器/伪类选择器）>标签选择器（伪元素选择器）
1）同类选择器条件下层级越多的优先级越高
3、样式冲突：选择器一样的情况下后面的会覆盖前面的属性（本文遇到的情况）
4、抽离样式模块