将样式应用于除一个表之外的所有表

Question

我希望某些样式在屏幕太小时不应用于 table。

问题是这些样式应用于 table 或 tr 或 td 等

有没有办法指向除这个以外的所有 table？也许有一些特定的ID？我不想要的是必须自己介绍 css 属性，我只是希望它们不要应用于特定的 table.

非常感谢

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0px;
}   
td,
th {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 15px;
}

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th> 
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      <td>Matman</td>
      <td>Chief Sandwich Eater</td> 
    </tr>
    <tr>
      <td>Andor</td>
      <td>Nagy</td>
      <td>Designer</td>  
    </tr>
    <tr>
      <td>Tamas</td>
      <td>Biro</td>
      <td>Game Tester</td> 
    </tr> 
  </tbody>
</table>

Answer 1

您可以使用 :not 选择器。

div:not(.main){
  display:none;
}

<div>A</div>
<div class="main">B</div>
<div>C</div>

这是一个示例，其中显示了 3 个 table 和一个 thead :

table {
  border: 1px solid black;
}

table:not(.main) thead {
  display: none;
}

<table>
  <thead>
    <tr>
      <th>A</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

<table class="main">
  <thead>
    <tr>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
  </tbody>
</table>

如果您愿意，也可以将 class 应用于广告并使用 thead:not(.main)

将样式应用于除一个表之外的所有表

apply styles to all tables except one

css

css-selectors