.class .class在css中使用相同的classname选择器

Question

任何人都可以解释一下下面的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有效吗？我遇到过这个帖子 选择器".class.class"和".class .class"有什么区别？ 但如果我们两次使用相同的类名,不确定它是否适用？

Answer 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.

演示

买前先试试