td .cssClass - 这是一个有效的构造吗？ [关闭]答案

【问题标题】：td .cssClass - is this a valid construct? [closed]td .cssClass - 这是一个有效的构造吗？ [关闭]
【发布时间】：2018-07-25 07:05:48
【问题描述】：

我对这个基本的 CSS 有疑问。

"tbody tr td .plusIcon" 没有被占用。取而代之的是“.plusIcon”。

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

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

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

【问题讨论】：

不，这不是有效的 CSS。这是 Sass / SCSS，来自jigsaw.w3.org/css-validator/validator
标题中的问题可以用“是”来回答。它是有效的，就像 SCSS 编译器的输出一样。问题是，为什么你认为 .plusicon 在表格单元格中不起作用？

标签： css html-table

【解决方案1】：

如果你使用像 sass 这样的预处理器，你可以像这样嵌套选择器。不是普通的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;
}

【讨论】：

非常感谢teevik。另外，我发现 less playground 有用的地方进行测试。
@SanjaiPrabahar 您已接受此答案，但它没有解决您问题的最新版本。那么你最好提出一个新问题，除非你弄清楚当前 sn-p 中的问题是什么，在这种情况下你可以发布你自己的答案。提示：空格太多了。

【解决方案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 搜索此内容。

【讨论】：

@op，你也可以使用更少的元素嵌套来完成同样的事情。让你的 CSS 更容易维护
肯定会在谷歌中查找。另外，我发现 less playground 有用的地方进行测试。