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有效吗？我遇到过这个帖子 What is the difference between the selectors ".class.class" and ".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。

<强>演示

Try before buy

Answer 2

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

此css定位的是.validate-error的后代.validate-error。

例如

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

当.validate-error

旁边的.make-switch时，下一个css会将其定位

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

Answer 3

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

Answer 4

Id只应该是唯一的，但我们可以多次使用classname。

Answer 5

当选择器部件粘在一起而没有空格时，意味着它应该都匹配相同的元素。

示例:(应仅匹配同时具有validate-error和other-class的元素）

.validate-error.other-class

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

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

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

5 个答案: