如何使共享类名的两个 CSS 元素不同？答案

【问题标题】：How to make two CSS elements that share class name different?如何使共享类名的两个 CSS 元素不同？
【发布时间】：2021-03-26 10:15:11
【问题描述】：

两个元素具有相同的类名，在我的例子中是“img”

是否可以为两个不同类的子元素设置不同的样式，即使它们具有相同的类名？

我希望 "slide-type-final" 类下的 img 元素的样式与 "question-2" 下的 img 元素的样式不同

.slide-type-final>img {
    max-height: 40em;
}

.question2>img {
    max-height: 40em;
    display: inline-table;
}

【问题讨论】：

【解决方案1】：

img 在这种情况下不是类名，是吗？除了您在问题中已有的解决方案（？）之外，...：

1.) 您可以为父母申请第二个班级，例如<div class="slide-type-final up"><img scr="...">，您可以将其img 的孩子称为slide-type-final.up>img { ... }

2.) 您可以将不同的类应用于img 标签，例如<div class="slide-type-final"><img class="up" scr="...">，您可以将其寻址为slide-type-final>img.up { ... }

【讨论】：

【解决方案2】：

如果你能提供 html 结构会很有帮助。是的，可以根据父元素/类覆盖 css 样式。

如果您的代码中的样式没有被覆盖，这意味着层次结构不正确。

'>' 符号表示 img 标签（注意不是类，因为你应该有 .img 来捕获 img 类）应该是具有类 slide-type-final 或类 question2 的元素的直接子元素。如果类的权重相同，那么最后的样式将适用

【讨论】：

【解决方案3】：

您可以使用伪类，例如 nth-child(2n)/first-child/first-of-type/last-child

或者 :not(:last-child) 等

【讨论】：