css - 从默认 CSS 样式继承样式，同时覆盖一个属性

Question

假设我定义了以下 CSS：

.scrabble-container {
clear: both; }
@media screen and (min-width: 1024px) {
    .scrabble-container {
    margin-left: 15px; } }

.scrabble-container .scrabble-tile__space {
    width: 90px;
    height: 100px;
    display: inline-block;
    background: #D5B292;
    color: #2A1F1B;
    border-radius: 4px;
    font-size: 60px;
    font-weight: 400;
    line-height: 100px;
    margin: 10px 3px;
    text-align: center;
    vertical-align: bottom;
    cursor: default;
    text-transform: uppercase;
    box-shadow: 3px 3px 4px rgba(107, 107, 107, 0.8), inset 3px 0 2px rgba(255, 255, 255, 0.4), inset 0 3px 0px rgba(255, 255, 255, 0.5), inset -2px -3px 0px rgba(143, 128, 82, 0.6); }

.scrabble-container .scrabble-tile__letter {
    background: #D5B292 no-repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 3px 3px 4px #c8c8c8, 3px 0 2px rgba(213, 178, 146, 0.4) inset, 0 3px 0 rgba(213, 178, 146, 0.5) inset, -3px -4px 0 rgba(107, 107, 107, 0.6) inset;
    color: #2A1F1B;
    cursor: default;
    display: block;
    float: left;
    font-family: "Spinnaker", Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    height: 35px;
    line-height: 32px;
    margin: 10px 3px;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9), 0 -1px 1px rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    width: 35px; }
    @media screen and (min-width: 480px) {
    .scrabble-container .scrabble-tile__letter {
        width: 31px;
        height: 31px;
        line-height: 25px;
        font-size: 18px; } }
    @media screen and (min-width: 640px) {
    .scrabble-container .scrabble-tile__letter {
        width: 40px;
        height: 47px;
        display: inline-block;
        float: none;
        font-size: 24px;
        line-height: 47px; } }
    @media screen and (min-width: 768px) {
    .scrabble-container .scrabble-tile__letter {
        width: 53px;
        height: 58px;
        font-size: 30px;
        line-height: 58px; } }

我想创建一个新的 CSS 类.scrabble-tile__letter__R，它继承了.scrabble-tile__letter该类的所有属性，除了背景是红色的。我可以执行以下操作：

   .scrabble-container .scrabble-tile__letter__R {
        background: #e9afaf no-repeat scroll 0 0;
        border-radius: 4px;
        box-shadow: 3px 3px 4px #c8c8c8, 3px 0 2px rgba(213, 178, 146, 0.4) inset, 0 3px 0 rgba(213, 178, 146, 0.5) inset, -3px -4px 0 rgba(107, 107, 107, 0.6) inset;
        color: #2A1F1B;
        cursor: default;
        display: block;
        float: left;
        font-family: "Spinnaker", Arial, sans-serif;
        font-size: 22px;
        font-weight: 400;
        height: 35px;
        line-height: 32px;
        margin: 10px 3px;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9), 0 -1px 1px rgba(255, 255, 255, 0.2);
        text-transform: uppercase;
        width: 35px; }
        @media screen and (min-width: 480px) {
            .scrabble-tile__letter__R {
            width: 31px;
            height: 31px;
            line-height: 25px;
            font-size: 18px; } }
        @media screen and (min-width: 640px) {
        .scrabble-container .scrabble-tile__letter__R {
            width: 40px;
            height: 47px;
            display: inline-block;
            float: none;
            font-size: 24px;
            line-height: 47px; } }
        @media screen and (min-width: 768px) {
        .scrabble-container .scrabble-tile__letter__R {
            width: 53px;
            height: 58px;
            font-size: 30px;
            line-height: 58px; } }

但是，如果我想通过 CSS 应用多种不同的颜色，这将变得笨拙。这样做的正确方法是什么，以便我可以继承所有属性（包括@media screen组件），同时只覆盖背景颜色？

标签： css

Answer 1

只需将通用样式分配给两个类：

.scrabble-container .scrabble-tile__letter,
.scrabble-container .scrabble-tile__letter__R {
  background: #D5B292 no-repeat scroll 0 0;
  border-radius: 4px;
  box-shadow: 3px 3px 4px #c8c8c8, 3px 0 2px rgba(213, 178, 146, 0.4) inset, 0 3px 0 rgba(213, 178, 146, 0.5) inset, -3px -4px 0 rgba(107, 107, 107, 0.6) inset;
  color: #2A1F1B;
  cursor: default;
  display: block;
  float: left;
  font-family: "Spinnaker", Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  height: 35px;
  line-height: 32px;
  margin: 10px 3px;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9), 0 -1px 1px rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  width: 35px; 
}

/*Here the color change*/
.scrabble-container .scrabble-tile__letter__R {
  background-color: #e9afaf;
}

@media screen and (min-width: 480px) {
  .scrabble-container .scrabble-tile__letter,
  .scrabble-container .scrabble-tile__letter__R {
    width: 31px;
    height: 31px;
    line-height: 25px;
    font-size: 18px; 
  } 
}
    
@media screen and (min-width: 640px) {
  .scrabble-container .scrabble-tile__letter,
  .scrabble-container .scrabble-tile__letter__R {
    width: 40px;
    height: 47px;
    display: inline-block;
    float: none;
    font-size: 24px;
    line-height: 47px; 
  } 
}

@media screen and (min-width: 768px) {
  .scrabble-container .scrabble-tile__letter,
  .scrabble-container .scrabble-tile__letter__R {
    width: 53px;
    height: 58px;
    font-size: 30px;
    line-height: 58px; 
  } 
}

元素：

<div class='scrabble-tile__letter__R'></div>

---

或者为颜色创建一些额外的类：

.scrabble-container .scrabble-tile__letter {
  background: #D5B292 no-repeat scroll 0 0;
  border-radius: 4px;
  box-shadow: 3px 3px 4px #c8c8c8, 3px 0 2px rgba(213, 178, 146, 0.4) inset, 0 3px 0 rgba(213, 178, 146, 0.5) inset, -3px -4px 0 rgba(107, 107, 107, 0.6) inset;
  color: #2A1F1B;
  cursor: default;
  display: block;
  float: left;
  font-family: "Spinnaker", Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  height: 35px;
  line-height: 32px;
  margin: 10px 3px;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9), 0 -1px 1px rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  width: 35px; 
}

etc..

.scrabble-container .scrabble-tile__letter.red {
  background-color: #e9afaf;
}

.scrabble-container .scrabble-tile__letter.blue {
  background-color: blue;
}

元素：

<div class='scrabble-tile__letter red'></div>