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

Question

<li><a href="sms:15069069579"><i class="fa fa-user fa-2x icobm" onclick="test()"><span id="test">我</span></i></a></li>

通过css调解文字和图标没法同时显示同一种颜色
后来通过js获取css样式修改span里面的css仍然没有成功

<script type="text/javascript">
    function test(){
         document.getElementById("test").style.color="red";
        
    }
</script>

希望朋友帮忙指点一下，谢谢

Answer 1

你是说无序前面那一点和链接字体的颜色要一致吗？

<li style="color:red">
	<a href="sms:15069069579" style="color:red">
		<i class="fa fa-user fa-2x icobm" onclick="test()">
			<span class="test">我</span>
		</i>
	</a>
</li>

Answer 2

你试下把上面贴的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>a span{
	overflow: hidden;
	margin: 0 0 0 0;
	font-size: 12px;
	color: #B0B0B0;
	display: block;
	line-height: 18px;
	text-align: center;
}
.footer .topmenu>li>a:hover,.footer .topmenu>li>a:hover span{
	color:#930e0e;
}

你的css写的有点混乱啊，important不要乱用。

Answer 3

关于楼主代码中的几个小问题
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结构里属性是<span class="test">我</span>，这样导致你的脚本会失效。

4、请楼主多巩固CSS的一些选择器和属性的基础用法，提供一个 CSS 参考手册

如还有疑问，欢迎交流。