<分区>
<分区>
[编辑:由于从基于 javascript 的原始问题创建此问题时出现错误，此问题已过时。 ]
我有一个 HTML 页面，其中显示了我们各种产品和多个版本的最新构建状态的矩阵。
在此矩阵中，通过分配一个额外的样式类 "stale" 来设置 opacity: .5 来淡化旧版本。
该矩阵还显示了所执行测试的结果。测试结果元素是构建元素的兄弟元素并部分覆盖它。
但是，我现在的问题是，如果“build”元素淡出，“test”元素也会淡出。首先，我想了解原因，其次，我不希望“测试”结果透明。
table { border: 1px solid darkgrey; }
td { border: 1px solid darkgrey; overflow: hidden; }
div { text-align: center; }
.build {
border: solid black 1px;
width: 10em;
margin: 0.2em;
padding: 0.2em;
font-size: 1.0em;
}
.test {
float: right;
border: solid lightgrey 1px;
width: 3em;
margin-top: -0.8em;
margin-right: -0.4em;
// opacity: .99; // workaround
}
.fail { background-color: rgb(255, 150, 150); }
.ok { background-color: rgb(170, 255, 170); }
.red { background-color: rgb(255, 150, 150); }
.green { background-color: rgb(150, 255, 150); }
.stale { opacity: .5; }<table>
<tr>
<th>Version</th>
<th>Product A</th>
<th>Product B</th>
</tr>
<tr>
<td>1.1</td>
<td>
<div class="build ok">success</div>
<div class="test green">100%</div>
</td>
<td>
<div class="build ok">success</div>
<div class="test red">98%</div>
</td>
</tr>
<tr>
<td>1.0</td>
<td>
<div class="build ok stale">success</div>
<div class="test red">99%</div>
</td>
<td>
<div class="build fail stale">failure</div>
</td>
</tr>
</table>(使用 Firefox 52.1 ESR、Chrome 58 测试)
我做了一些研究并遇到了 SO 问题 css opacity affecting sibling image opacity但是添加 position 和 z-index (在样式类 build 和 test 中的一个或两个上)没有解决我的问题。
到目前为止，我发现解决此问题的唯一方法是将 opacity: .99; 添加到我的 .test 样式定义中，但不要考虑这个一个干净的解决方案，并希望更好地理解这种行为的原因。
最佳答案
您需要关闭您的 <div>正确标记。
您遇到的问题是您的浏览器试图在运行时“修复”您的标记的结果，<div>元素错误地相互放置，因此它们不再是 sibling 。
修复您的标记即可解决您的问题。
table { border: 1px solid darkgrey; }
td { border: 1px solid darkgrey; overflow: hidden; }
div { text-align: center; }
.build {
border: solid black 1px;
width: 10em;
margin: 0.2em;
padding: 0.2em;
font-size: 1.0em;
}
.test {
float: right;
border: solid lightgrey 1px;
width: 3em;
margin-top: -0.8em;
margin-right: -0.4em;
// opacity: .99; // workaround
}
.fail { background-color: rgb(255, 150, 150); }
.ok { background-color: rgb(170, 255, 170); }
.red { background-color: rgb(255, 150, 150); }
.green { background-color: rgb(150, 255, 150); }
.stale { opacity: .5; }<table>
<tr>
<th>Version</th>
<th>Product A</th>
<th>Product B</th>
</tr>
<tr>
<td>1.1</td>
<td>
<div class="build ok">success</div>
<div class="test green">100%</div>
</td>
<td>
<div class="build ok">success</div>
<div class="test red">98%</div>
</td>
</tr>
<tr>
<td>1.0</td>
<td>
<div class="build ok stale">success</div>
<div class="test red">99%</div>
</td>
<td>
<div class="build fail stale">failure</div>
</td>
</tr>
</table>关于html - css 不透明度影响同级不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44438643/