html - 当 div 没有使用 css 的某些类时，如何在 div 中添加元素的样式？

Question

当 div 不属于某个类时，我想为 div 元素添加一些样式

我想做什么？我有一个“卡片”类的 div。我在 div 中还有其他元素，例如页脚、标签和 h4。现在我想在光标悬停时将 a、h4 标签设置为蓝色。

所以我像下面那样做，

.card a h4:hover {
    color: blue;
}

但是当 div 只有卡片类时，我想将这种样式添加到那些 a 和 h4 元素中。当 div 具有“card”和“disabled”类时，我不会为 a、h4 元素着色为蓝色。我该怎么做。

下面是html代码，

<div class="card">
    <div class="footer">
        <div class="info">
            <a href="somelink">
                <h4>text</h4>
            </a>
        </div>   
    </div>
</div>

有人可以帮我解决这个问题。谢谢。

标签： htmlcss

Answer 1

希望您正在寻找这样的解决方案。将样式添加到h4悬停在类下的标记，card而不是为具有card和disabled类 的 div 添加任何特定样式

.card a h4:hover {
    color: orange;
}
.card.disabled a h4:hover {
    color: inherit;
}

<div class="card">
  <div class="footer">
      <div class="info">
          <a href="">
              <h4>Card</h4>
          </a>
      </div>   
  </div>
</div>

<div class="card disabled">
  <div class="footer">
      <div class="info">
          <a href="">
              <h4>Card Disabled</h4>
          </a>
      </div>   
  </div>
</div>