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

Question

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

这有什么区别：

.class1 .class2 {blahblah}

这样：

.class1, .class2 {blahblah}

和此：

.class1 > .class2 {blahblah}

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

Answer 1

.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-＆gt; child。

.class1 .class2 {}

和最后一个

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

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

您可能会发现this link很有趣。

Answer 2

1. 的 .class1 .class2 {}

这会选择.class2

的孩子.class1
1. 的 .class1, .class2 {}

这会选择.class1以及.class2

1. 的 .class1 > .class2 {}

这会选择.class2

旁边的.class1

请看下面的代码段：

＆＃13;
＆＃13;
.case1 .class1 .class2 {
  background-color: red;
  color: white;
}

.case2 .class1, .case2 .class2 {
  background-color: red;
  color: white;
}

.case3 .class1 > .class2 {
  background-color: red;
  color: white;
}

pre {
  display: inline-block;
  background: #ff0;
}
＆＃13;
<div class="case1">
  <strong>Case 1: <pre>.class1 .class2</pre></strong>
  <div class="class1">Class1
    <div class="class2">Class2</div>
  </div>
</div>
<br><br>
<div class="case2">
  <strong>Case 2: <pre>.class1, .class2</pre></strong>
  <div class="class1">Class1
    <div class="class2">Class2</div>
  </div>
</div>
<br><br>
<div class="case3">
  <strong>Case 3: <pre>.class1 > .class2</pre></strong>
  <div class="class1">Class1
    <div class="class2">Class2</div>
    <div class="class3">
      <div class="class2">Class2</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

Answer 3

您正在查看CSS中的三种不同选择器：

• .class1 .class2 {}是后代选择器 - 这些样式将应用于任何.class2元素，该元素是.class1元素的后代（无论向下多少级别）

• .class1, .class2 {}是多元素选择器 - 样式将应用于任何.class1元素和任何.class2元素

• .class1 > .class2 {}是直接后代选择器 - 这些样式将应用于任何.class2元素，该元素是.class1元素的直接子后代（如果是孙子或曾孙，样式将不会适用）

还有很多其他选择器。以下是一些：

• .class1 + .class2 {}是直接的兄弟选择器 - 这些样式将应用于任何.class2元素，该元素是{em>与<{1}}元素紧邻的兄弟元素（如果是非连续的兄弟姐妹，则不会申请

• .class1是后续的兄弟选择器 - 这些样式将应用于任何.class1 ~ .class2 {}元素，后者是.class2元素的后续兄弟（无论后来有多少兄弟姐妹）出现）

• .class1是同步选择器 - 只有当元素同时是.class1.class2 {}元素和.class1元素时，样式才会应用于元素（例如。{{1} }）

<强>示例：

.class2

style="class1 class2"

Answer 4

这是一个great game，它可以教你每个选择器的作用。

空格是descendant选择器。它说选择所有class2作为class1的后代。

逗号是OR意味着选择class1或class2。

＆gt;是direct descendant意思是选择所有具有直接父级为class1的class2。

Answer 5

.class1 .class2 {rules}

使用.class1

在所有元素中选择.class2的所有元素

.class1, .class2 {rules}

使用.class1选择所有元素，使用.class2

选择所有元素

.class1 > .class2 {rules}

选择只有.class2的子元素，其中parent是.class1

的元素

Answer 6

.class1 > .class2定位元素.class2，该元素是元素的直接子元素.class1

.class1 .class2将.class2的元素定位在.class1的其他元素中，无论它是否是直接的孩子（它可以是孩子的孩子等等） ）。

.class1, .class2使用.class1定位元素，使用.class2定位元素。

这是此主题的reference to MDN。