CSS 使用不同的规则定位和覆盖元素的样式

Question

我的表格中有两种类型的单元格。

第一类单元格的类名为".top"

第 2 种类型的单元格的类名为".top .selected"

我的问题是我必须删除第二种单元格中的边框顶部。

这是我的代码：但它不应用第二个代码。

第一种：

html body #ROOT tr.fare .top {
border-top: 3px solid #888888 !important;
}

第二种类型：

html body #ROOT tr.fare .top .selected{
border-top: none !important;
}

我无法从第一种类型中删除！重要标签。我想覆盖第一个属性并应用第二个类型的 css。请告诉我，如何强势定位？？

Answer 1

从您的解释来看，听起来所选的单元格既有顶级类又有选择。

在这种情况下，您的规则应如下所示：

html body #ROOT tr.fare .top.selected{ /* no space between top and selected */
    border-top: none;
}

空间有很大的不同。

.top .selected
{
  ...
}

上述选择器表示：选择所有选择了类名的元素，这些元素是具有类顶部的元素的十进制。

但是以下选择器

.top.selected
{
  ...
}

means：选择已选择类的元素以及 top 的类名。

Answer 2

你应该用CSS写这个：

html body #ROOT tr.fare .top.selected{
border-top: none !important;
}

删除 .top 和 .selected 之间的空格

.

top.selected = 具有两个类的元素

.top .selected

= .top 元素，该元素在另一个元素中具有 .selected 类。