【html】如何解决标签设置成超链接后字体格式及颜色变化的问题

问题描述：

如图所示，将一个标签设置成超链接后字体颜色和格式会发生改变，如果我只想让它保持原来的格式应该怎么办？

解决方法：

在a标签中添加一个属性：

style="color:inherit;"

添加后的代码：

<a style="color:inherit;" href="product/type/2799-7169-1.html"  id = "topmenu69541"  >关于我们</a>

添加后效果：

可以看到添加改属性后超链接的字体颜色和大小与其他标签字体完全相同

实现分析（inherit属性）：

inherit 关键字指定一个属性应从父元素继承它的值。

inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。

以下面的代码为例：

<div class="child" id="div_69541">
	<ol id="ol_69541">
		<a style="color: inherit;" href="product/type/2799-7169-1.html"
			id="topmenu69780"><li>公司介绍</li></a>
		<a style="color: inherit;" href="product/type/2799-7171-1.html"
			id="topmenu69782"><li>加入我们</li></a>
		<a style="color: inherit;" href="product/type/2799-7172-1.html"
			id="topmenu69783"><li>合作伙伴招募</li></a>
		<a style="color: inherit;" href="product/type/2799-7173-1.html"
			id="topmenu69784"><li>联系我们</li></a>
	</ol>
</div>
<style>
.child {
	top: 97px;
	left: -43px;
	padding: 0px;
	z-index: 999;
	width: 150px;
	border: 1px solid #b5b5b5;
}

.child ol {
	background: #fff;
	border: none;
	width: 150px;
}

.child ol li {
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #b5b5b5;
	text-align: center;
	width: 150px;
}

.child ol li a {
	padding: 0;
	width: 100%;
}

.child ol li:last-child {
	border-bottom: none;
}

.child ol li a:hover {
	color: #fff;
	background: #205ba3;
}

.w_219 h5 label {
	display: none;
}
</style>

注：<style>中的代码为CSS代码

  分析：如果<a>添加该属性后就会强制继承其父标签<ol>的style属性,而<ol>的属性收到了下面css代码的控制，所以最终<a>的属性和其他<li>标签相同

总结：

  这里不得不感叹一下inherit属性的强大，之前以我个人的认知我觉得设置成超链接后字体的格式和颜色一定会变，想要和原来保持一致需要使用css代码设置<a>的属性和其他的标签一模一样，对比一下，十分佩服开发者的智慧。天下苦前端三大组久矣？非也！但手不熟尔！