子元素明确父母的CSS

Question

<style>
#popBox{width:100%; height:100%; 
        position:fixed; left:0; top:0; 
        border-collapse:collapse; 
        background:black; opacity:0.8; 
        display:none;
}
</style>

<table id="popBox">
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td id="popBox_container"></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>

我有一个表设置不透明度：0.8

在此表的内部，td的不透明度之一应为1

是否有办法清除以不同的不透明度设置此td？

因为这个表中有9个td，我不想设置一个类并放入8个元素

Answer 1

无法通过继承更改不透明度。

最好的办法是：

<table id="popBox">
  <tr>
    <td>Something</td>
    <td>Something</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>Something</td>
    <td id="popBox_container">Unique</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>Something</td>
    <td>Something</td>
    <td>Something</td>
  </tr>
</table>
<style type="text/css">
  #popBox td {
    opacity: 0.8;
  }
  #popBox #popBox_container {
    opacity: 1;
  }
</style>

JSFiddle Here

Answer 2

您可以使用:nth-child()或:nth-of-type()等伪选择器

试试这个

#popBox tr:nth-child(2) td:nth-child(1){
     opacity: 1;
}

FIDDLE

有关这些访问的详情，请访问：here

Answer 3

我不知道这背后的逻辑，但是如果你想要例如设置第5个td不透明度1 而不使用其他类和ID ，你可以尝试使用jQuery这样做：

$("td:eq(4)").css("opacity", "1");

Answer 4

如果您希望您的td#popBox_container opacity: 1只需在声明表格样式后添加此元素的样式：

<style>
#popBox{width:100%; height:100%; 
        position:fixed; left:0; top:0; 
        border-collapse:collapse; 
        background:black; opacity:0.8; 
        display:none;
}

#popBox #popBox_container{
   opacity: 1;
}
</style>

Answer 5

如果您将opacity样式应用于父级，在本例中为#popBox，则所有子级都将继承该样式。

Answer 6

子将始终从其父元素继承不透明度。不透明度实际上并未在CSS中继承。它是一个后期渲染组变换。

您可以将background-color与rgba一起使用，而不是使用不透明度。

<强> HTML：

<table id="popBox">
 <tr>
    <td>Your Content</td>
    <td>Your Content</td>
    <td>Your Content</td>
 </tr>
 <tr>
    <td>Your Content</td>
    <td id="popBox_container">Your Content</td>
    <td>Your Content</td>
 </tr>
 <tr>
    <td>Your Content</td>
    <td>Your Content</td>
    <td>Your Content</td>
 </tr>
</table>

<强> CSS：

#popBox{
    background: rgba(0, 0, 0, 0.4);
}
#popBox td{
    border:1px solid black;
}

#popBox td#popBox_container {
    background: rgba(255, 0, 0, 1);
}

Try in fiddle

要获取特定列，您可以使用伪选择器:nth-child()，:first，:last等...

如果我们想将第一列的不透明度设置为第一个表行 - 您可以使用此CSS类：

#popBox tr:nth-child(1) td:nth-child(1) {
    background: rgba(0, 0, 0, 1);
    color:white;
}

Try in fiddle