的CSS除了时刻HTML元素时，元素定义了覆盖

Question

我有以下的html代码：

<div class="content"> 
<p><table> <tr><td>sadsa</td><td>sadasdsa</td></tr></table></p> 
<p><p><table> <tr><td>sadadsa</td><td>asdasasdsa</td></tr></table></p></p> 
<form><table> <tr><td><input></td><td><input></td></tr></table> 
</div> 

和CSS代码：

.content table tr td{ 
    color: white; 
    padding: 3px; 
    border: 1px solid white; 
} 

<table>可以有任何重叠和任意数量的HTML他们。 我需要我的CSS适用于所有这些，除非<form>是覆盖。

换句话说，如果.content有孩子<form>和<form>有孩子<table>我的CSS不应该工作。他们之间可以有其他的孩子/父母喜欢0​​等

Answer 1

使用:not()选择：

http://www.w3schools.com/cssref/sel_not.asp

我也改变了你的HTML，因为你<table>标签内<p>这是不允许的：

Why is <table> not allowed inside <p>

.content :not(form) table tr td{ 
 
    color: white; 
 
    padding: 3px; 
 
    border: 1px solid white; 
 
}

<div class="content"> 
 
    <div> 
 
    <table> 
 
    <tr> 
 
     <td>sadsa</td> 
 
     <td>sadasdsa</td> 
 
    </tr> 
 
    </table> 
 
    </div> 
 
    <div> 
 
    <div> 
 
     <table> 
 
     <tr> 
 
      <td>sadadsa</td> 
 
      <td>asdasasdsa</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
    <form> 
 
    <table> 
 
     <tr> 
 
     <td><input></td> 
 
     <td><input></td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
</div>