关于父元素设置opacity后，子元素设置opacity无效问题

问题来源：

最近做一个项目，由于外层p元素字体是半透明的，而内部span元素的字体要求不透明，于是在父元素设置了opacity：0.7，子元素设置opacity：1.0，代码如下。

.detail-top .detail-explain {
	justify-content: space-between;
	margin-top: 50px;
	padding-right: 5%;
	opacity: 0.7;
}
.detail-top .detail-explain span {
	display: block;
	margin-bottom: 10px;
    opacity: 1.0;
	font-size: 24px;
	color: #2A2B34;
	line-height: 30px;
	font-weight: 600;
}

结果发现子元素还是半透明的样式，相当于opacity：1.0没有生效？后面查阅资料才发现，子元素会继承父元素的opacity属性，如果子元素单独设置了opacity那么其真正的结果值是子元素与父元素opacity值的乘积。所以子元素opacity设置为1，其透明度仍然是0.7*1=0.7，（注意opacity的值为0-1，所以不能通过设置opacity为2来使透明度为1）。

解决办法：

在父元素设置color时使用rgba，这样再单独设置子元素的color就不会发生继承问题了，代码如下。

.detail-top .detail-explain {
	justify-content: space-between;
	margin-top: 50px;
	padding-right: 5%;
	color: rgba(82, 84, 101, 0.7);
}
.detail-top .detail-explain span {
	display: block;
	margin-bottom: 10px;
	font-size: 24px;
	color: #2A2B34;
	line-height: 30px;
	font-weight: 600;
}