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;
}

html <table>可以包含任何叠加层和任意数量的叠加层。我需要我的css适用于所有这些，除非<form>是叠加层。

换句话说，如果.content有孩子<form>且<form>有孩子<table>我的css不应该工作。在他们之间可以是其他孩子/父母，如<form><p><table>...</table></p></form>等。

Answer 1

使用:not()选择器：

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

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

Why is <table> not allowed inside <p>

＆＃13;

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

＆＃13;

<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>

＆＃13;

除了元素已定义叠加的时刻之外，hss元素的css

1 个答案: