如何基于父类调整子元素CSS样式？.TestPageB的padding差异化设置

要实现需求，必须为.TestPageB单独编写CSS块，无法在同一代码块内给不同父容器下的.subComponent设置差异化padding值。

最优实现方式 #

先定义三个页面的公共嵌套样式（除.subComponent的padding外，其余样式均通用），再单独为.TestPageB覆盖.subComponent的padding属性：

// 三个页面的公共样式
.TestPageA, .TestPageB, .TestPageC {
  .TopSection, .BottomSection {
    .subComponent {
      // 默认设置.TestPageA和.TestPageC的padding
      padding: 50px 0 44px 0;

      .leftSide {
        padding: 0;

        .title {
          width: 100%;
          float: left;
          padding-bottom: 20px;

          h2, h3 {
            .borderBottom {
              border-bottom: solid 1px #fff;
              width: 100%;
            }              
          }

          h2.page {
            margin: -6px 0 4px 0;
          }

          svg, h2, h3 {
            float: left;
          }
        }
      }          
    }
  }
}

// 单独覆盖.TestPageB下.subComponent的padding
.TestPageB {
  .TopSection, .BottomSection {
    .subComponent {
      padding: 40px 0 40px 0;
    }
  }
}

原理说明 #

CSS遵循权重相同则后声明的样式覆盖前声明的规则。上面的代码中，先给三个页面统一设置了默认padding（对应A和C的需求），再单独为.TestPageB设置专属padding，由于选择器权重一致，后写的.TestPageB样式会覆盖默认值，从而实现差异化效果。

内容的提问来源于stack exchange，提问作者user27923454