Question

[编辑：由于从基于javascript的原始版本创建此问题时出现错误，此问题已过时。]

我有一个HTML页面，其中显示了我们各种产品和多个版本的最新构建状态矩阵。

在此矩阵中，通过指定其他样式类opacity: .5来设置"stale"，可以淡化旧版本。该矩阵还显示了执行测试的结果。测试结果元素是构建元素的兄弟，并且部分覆盖它。

但是，我现在的问题是，如果'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测试）

我做了一些研究并遇到了问题css opacity affecting sibling image opacity，但添加了position和z-index（在build和{{1}样式类中的任何一个或两个上}）没有解决我的问题。

到目前为止我找到解决此问题的唯一方法是将test添加到我的opacity: .99;样式定义中，但不要认为这是一个干净的解决方案，并希望更好地理解这种行为的原因。

Answer 1

您需要正确关闭<div>代码。

您遇到的问题是您的浏览器尝试在运行时“修复”您的标记，<div>元素错误地放在另一个元素中，因此它们不再是兄弟姐妹。

修复标记可以解决您的问题。

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>

css不透明度影响兄弟不透明度

1 个答案: