css - SCSS 子类优于父类

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

您可以提供与current-month 和last 类相同的特异性，在末尾写上selected 会更精确并覆盖其他类.

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