html - 如何使用 CSS 控制特定表格中列的行为

Question

我有以下控制行为的CSS我最喜欢的 table :

#table_myfavorite1, #table_myfavorite2  {
    width: 100% !important;
}

我想做的是在该表中的列上指定相同的条件(即不是全局的)。

我试过了，但它影响了其他表。

#table_myfavorite1, #table_myfavorite2  td {
    width: 100% !important;
}

正确的做法是什么？

Answer 1

使用后代选择器。您之前的代码将选择页面中的所有 td。

HTML

First Table
<table id="table_myfavorite1">
  <tr>
    <td>1st column</td>
    <td>2nd column</td>
  </tr>
</table>
Second Table
<table id="table_myfavorite2">
  <tr>
    <td>1st column</td>
    <td>2nd column</td>
  </tr>
</table>

CSS

#table_myfavorite1 td {
  background: lightgreen;
}

#table_myfavorite2 td {
  background: tomato;
}

JSFiddle

只有当属性值相同时，您才可以分解上述代码，即您想要相同的背景:

#table_myfavorite1 td, #table_myfavorite2 td {
  background: tomato;
}