.class .class css中相同的类名选择器答案

【问题标题】：.class .class same classname selector in css.class .class css中相同的类名选择器
【发布时间】：2021-06-21 20:02:43
【问题描述】：

谁能解释一下下面的css是做什么的？

.validate-error .validate-error {
  color: #cc2424;
  display: inline-block;
  margin-top: 5px;
}
.make-switch + .validate-error {
  margin-left: 10px;
}

在第一个 css 中，我看到 same class name 使用了两次？这个css有效吗？我遇到了这个线程 What is the difference between the selectors ".class.class" and ".class .class"? 但不确定如果我们两次使用相同的类名是否适用？。

【问题讨论】：

即使.validate-error.validate-error（中间没有空格）也是有效的，有时被用作提高特异性的黑客手段，但这是另一种情况......
@davidcondrey - 不，它不会：这只是意味着该类需要存在一次：.name.name 将匹配 class="name"。

标签： html css

【解决方案1】：

第一个样式子元素/后代具有相同的类名：

<div class="validate-error">
    This color may be different from #cc2424
    <div class="validate-error">Has color #cc2424</div>
</div>

这意味着：样式被应用/覆盖具有相同类名的子元素。

第二个样式兄弟：

<div class="make-switch"></div>
<div class="validate-error">Has left margin</div>
<div class="validate-error">Has no left margin</div>

这意味着：只有当.make-switch 后面跟着.validate-error 时，样式才会应用于.validate-error。

演示

Try before buy

【讨论】：

【解决方案2】：

.validate-error .validate-error {
  ...
}

这个 css 的目标是一个类 .validate-error，它是 .validate-error 的后代。

例如

<div class="validate-error">
    <div class="validate-error">
    </div>
</div>

下一个 css 以类 .validate-error 为目标，当它紧邻 .make-switch 时

.make-switch + .validate-error {
  ...
}

【讨论】：

【解决方案3】：

是的，它是有效的。 CSS 中没有规则可以防止类名在复杂选择器中多次出现。 HTML 中没有规则阻止两个元素（其中一个是另一个的后代）共享一个类的成员资格。

【讨论】：

【解决方案4】：

when selector parts are stuck together without whitespace it means it should all match the same element.

示例：（应该只匹配同时具有validate-error 和other-class 作为类的元素）

.validate-error.other-class

当它们之间有空格时，您将选择一个具有 other-class 作为类并且具有 parent element 和 validate-error 类的元素

第二个选择器中的+ 实际上意味着您不想要make-switch 的子元素，但您想要sibling 元素，但前提是它具有validate-error 类

【讨论】：

【解决方案5】：

id 只能是唯一的，但是类名可以多次使用。

【讨论】：