模块各个主要颜色通过color属性控制实例页面

展示

代码

• HTML：

  <section class="module">
      <h4>模块标题</h4>
      <content>
          <ul>
              <li>文字描述</li>
              <li>文字描述</li>
              <li>文字描述</li>
          </ul>
          <button>了解更多</button>
      </content>
  </section>
  
  <section class="module" data-theme="a">
      <h4>模块标题</h4>
      <content>
          <ul>
              <li>文字描述</li>
              <li>文字描述</li>
              <li>文字描述</li>
          </ul>
          <button>了解更多</button>
      </content>
  </section>
  
  <section class="module" data-theme="b">
      <h4>模块标题</h4>
      <content>
          <ul>
              <li>文字描述</li>
              <li>文字描述</li>
              <li>文字描述</li>
          </ul>
          <button>了解更多</button>
      </content>
  </section>

• CSS：

  .module {
      border: 1px solid;
  }
  .module h4 {
      margin: 0;
      padding: 5px 10px;
      -webkit-text-fill-color: #fff;
      background-color: currentColor;
  }
  .module button {
      border: 0;
      width: 100px; height: 32px;
      -webkit-text-fill-color: #fff;
      color: inherit;
      background-color: currentColor;
      margin-top: 10px;
  }
  .module content {
      display: block;
      padding: 10px;
  }
  .module ul {
      color: #333;
  }
  /* 主题颜色设置 */
  [data-theme="a"] {
      color: deepskyblue;
  }
  [data-theme="b"] {
      color: deeppink;
  }