Question

我怀疑这个基本的CSS。

＆＃34; tbody tr td .plusIcon ＆＃34;没有被采取。相反，＆＃34; .plusIcon ＆＃34;被采取。

请告诉我如何在 tbody tr td 中覆盖 .plusIcon ？

＆＃13;

tbody tr td .plusIcon {
  color: red;
}
tbody tr td .minusIcon {
  color: brown;
}
.plusIcon {
  color: silver;
}
.minusIcon {
  color: yellow;
}

＆＃13;

<table>
  <thead>
  <tr>
    <th>Firstname</th><th>Lastname</th><th>Age</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td class="plusIcon">Jill</td><td>Smith</td><td>50</td>
  </tr>
  <tr>
    <td>Eve</td><td>Jackson</td><td>94</td>
  </tr>
  </tbody>
</table>

＆＃13;

Answer 1

如果使用像sass这样的预处理器，可以嵌套这样的选择器。但不是普通的css。

使用正常的CSS你需要做

＆＃13;

tbody tr td .plusIcon {
  background: url(../img/left-arrow-blue.png) 15px 18px no-repeat;
  vertical-align: bottom;
  padding-left: 42px;
}
tbody tr td  .minusIcon {              
  background: url(../img/down-arrow-blue.png) 15px 18px no-repeat;
  vertical-align: bottom;
  padding-left: 42px;
}

＆＃13;

Answer 2

不，这不会起作用，因为它不是有效的CSS语法。

有效的CSS看起来像这样：

tbody tr td .plusIcon {
    background: url(../img/left-arrow-blue.png) 15px 18px no-repeat;
    vertical-align: bottom;
    padding-left: 42px;
}

tbody tr td .minusIcon {
    background: url(../img/down-arrow-blue.png) 15px 18px no-repeat;
    vertical-align: bottom;
    padding-left: 42px;
}

对于最佳做法和基金会，您应该使用Google搜索此内容。

td .cssClass - 这是一个有效的构造吗？

2 个答案: