将基于父级的CSS样式应用于子级到子级...

Question

假设我们有一个div类，它会根据我们是否选择标签

而动态变化

或图像

两者共享相同的父元素类：<nav class="coral-ColumnView-column">在这种情况下，如果选择了标签，我们需要应用width: 20rem;之类的CSS。

如果我们选择标签，这是HTML：

 <nav class="coral-ColumnView-column">
  <div class="coral-ColumnView-column-content">
    <a class="coral-ColumnView-item coral-ColumnView-item--hasChildren">
      <div class="coral-ColumnView-icon">
        <i class="coral-Icon coral-Icon--tags coral-Icon--sizeS"></i>
      </div>
    </a>
  </div>
</nav>

---

对于图像：

<nav class="coral-ColumnView-column">
  <div class="coral-ColumnView-column-content">
    <a class="coral-ColumnView-item coral-ColumnView-item--hasChildren">
      <div class="coral-ColumnView-icon">
        <i class="coral-Icon coral-Icon--folder coral-Icon--sizeS"></i>
      </div>
    </a>
  </div>
</nav>

由于标签和图像都共享相同的父类，并且仅基于标签选择，我们需要将max-width: 21.870rem;应用于父<nav class="coral-ColumnView-column">

标签和图片之间的唯一区别：

<i class="coral-Icon coral-Icon--folder coral-Icon--sizeS"></i> : Image
<i class="coral-Icon coral-Icon--tags coral-Icon--sizeS"></i> : Tags