<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参考手册
如还有疑问，欢迎交流。