css中的多个类引用有什么作用？

2023年5月6日 200次阅读

显然这个问题需要更多解释.

这有什么区别：

.class1 .class2 {blahblah}

这个：

.class1, .class2 {blahblah}

还有这个：

.class1 > .class2 {blahblah}

我无法理解这些差异.我希望尽可能详细地解释这一点.我没有找到任何能够以我正在寻找的方式将其分解为我的地方.谢谢.

最佳答案 .class1 .class2 {blahblah}影响其中class2是具有.class1的元素的祖先的元素

.class1,.class2 {blahblah}这意味着css规则会影响具有class1或class2的元素

.class1> .class2 {blahblah}这意味着.class1需要是class2的父级.

例子：

<elementA class="class1">
  <elementB class="class2"></elementB>
</elementA>

元素B是元素A的子元素,因此.class1 .class2 {}和.class1> .class2 {}定义会影响它.

<elementA class="class1">
  <elementC>
      <elementB class="class2"></elementB>
  </elementC>
</elementA>

在这种情况下,只有.class1 .class2 {}是正确的,因为在元素B和A之间没有直接关系parent-> child.

.class1 .class2 {}

最后一个

<elementA class="class1"></elementA>
<elementB class="class2"></elementB>

只有.class1,.class2 {}才有效,因为这些元素之间没有父/子/祖先关系.

你可能会发现this link有趣.

点赞