<i class=""></i>与<span>测试</span>嵌套顺序导致的图标和文字颜色显示不一致

Question

我
通过css调解文字和图标没法同时显示同一种颜色后来通过js获取css样式修改span里面的css仍然没有成功
functiontest(){
document.getElementById("test").style.color="red";
}
希望朋友帮忙指点一下，谢谢

Answer 1

你试下把上面贴的css换成这样试试，不知道是不是你要的结果：.footer.topmenu>li>a{ margin-top:10%; height:48px; margin-right:1px; display:block; text-align:center; color:#B0B0B0; background:none; text-decoration:none; -webkit-box-flex:1;}.footer.topmenu>li>aspan{ overflow:hidden; margin:0000; font-size:12px; color:#B0B0B0; display:block; line-height:18px; text-align:center;}.footer.topmenu>li>a:hover,.footer.topmenu>li>a:hoverspan{ color:#930e0e;}你的css写的有点混乱啊，important不要乱用。

Answer 2

关于楼主代码中的几个小问题1、首先用到了a标签超链接，定义这个元素样式需要使用伪类选择器的,如：a:link{}/*设置超链接a在未被访问前的样式*/a:visited{}/*设置超链接a已被访问过时的样式*/a:hover{}/*设置超链接a在其鼠标悬停时的样式*/a:active{}/*设置超链接a在被用户激活时的样式*/2、如果针对于a元素定义了颜色样式如a:link{color:red}，那么子元素span,i标签都会继承color值，根据你提供的代码默认情况下两者的颜色会保持一致，都会继承父元素字体颜色。3、getElementById("test")这个方法是选择id=test对象，而你的HTML结构里属性是我，这样导致你的脚本会失效。4、请楼主多巩固CSS的一些选择器和属性的基础用法，提供一个CSS参考手册如还有疑问，欢迎交流。