Question

我有这个：

tr {
          &.selected {
            background-color: #424253;
          }
          td {
            &.current-month {
              background-color: #2c3645;
            }
            &.last {
              background-color: #1e252f;
              font-weight: bold;
            }
          }
        }

tr中的规则：

&.selected {
        background-color: #424253;
      }

正如预期的那样，被td规则覆盖：

&.current-month {
          background-color: #2c3645;
        }
&.last {
          background-color: #1e252f;
          font-weight: bold;
        }

如何使它成为tr类selected总是否决任何影响background-color的td类（不使用！important）？

Answer 1

您可以提供与当前月和最后类相同的特异性，并在最后编写选中将更精确并覆盖其他

tr {              
          td {
            &.current-month {
              background-color: #2c3645;
            }
            &.last {
              background-color: #1e252f;
              font-weight: bold;
            }
            &.selected {
            background-color: #424253;
          }
          }
        }

Answer 2

您可以覆盖已分配类的所有td元素的背景：

tr {
  &.selected {
    background-color: #424253;
    &[class] {
      background-color: #424253;
    }
  }
  td {
    &.current-month {
      background-color: #2c3645;
    }
    &.last {
      background-color: #1e252f;
      font-weight: bold;
    }
  }
}

但我也认为在这种情况下使用它是完全可以的！重要的。另一个解决方案，如果您将使用tr和td元素的类将是这样的：

.table-row {
  .table-cell {
    &.current-month {
      background-color: #2c3645;
    }
    &.last {
      background-color: #1e252f;
      font-weight: bold;
    }
    @at-root .selected#{&} {
      background-color: #424253;
    }
  }
}

SCSS儿童班骑马上课

2 个答案: