CSS中通用选择器和降序选择器之间的区别

Question

我想知道是否有人可以告诉我何时使用通用选择器以及何时使用 css 中的后代选择器？我四处寻找一个很好的解释，但没有找到一个很好的答案来解释它们之间的区别以及何时使用其中一个：

div * .test{
   color: red;
}

div .test{
   color: red;
}

更新涵盖所有场景：

div * .test{
   color: red;
}

div *.test{
   color: red;
}

div .test{
   color: red;
}

Answer 1

一般规则是非常稀疏地使用通用选择器，因为它对性能的影响很差。你基本上几乎从不使用它。

后代选择器，顾名思义，以后代选择器之前的元素的后代为目标。

请注意，您显示的两个选择器并不完全相同。

从右到左阅读选择器很有帮助：

div * .test 目标

• 具有 css 类 test (.test) 的项目
• 是 的后代
• 任何元素*
• 这是 的后代
• div 元素。

看这个例子：

div * .test{
   color: red;
}

<div>
  <div class="test">test</div>
</div>

现在将其与您的第二个选择器进行比较：

div .test{
   color: red;
}

<div>
  <div class="test">test</div>
</div>

编辑：你现在扩大了你的问题。

*.test 和 .test 定位完全相同的元素，在这里显式使用通用选择器没有任何好处，我认为这是不好的编码习惯。 隐式它已经是任何没有元素选择器的选择器部分的一部分：

#foo 等同于*#foo
[foo] 等同于*[foo]

Answer 2

主要有 3 种类型的选择器 w.r.t.你在问什么。

1. 通用：div *：将CSS应用于div内的所有元素。
2. 直系子代： div > .test ：将 CSS 应用到 div 内的所有直系子代，即 child1 和 child2。
3. All children: div .test: 将 CSS 应用于 div 内满足条件的所有子项。即测试。

/* apply to every element */
* {
  padding: 4px;
}

div.parent {
  width: 100px;
  height: 100px;
  border: 2px solid green;
  background-color: lightblue;
}

/* apply to every element inside parent*/
.parnet * {
  border: 2px solid black;
}

/* apply to all immediate children element with class 'child1' inside parent*/
.parnet > .child1 {
  border: 2px solid red;
  background-color: lightgreen;
}

/* apply to all children element with class 'test' inside parent*/
.parnet .test {
  border: 2px solid blue;
  background-color: lightpink;
}

<div class="parnet">
  Parent
  <div class="child child1">
    child 1
    <div class="test">test 1</div>
  </div>
  <div class="child child2">
    child 2
    <div class="test">test 2</div>
  </div>
</div>

Answer 3

首先，请注意 CSS 中的 Child 组合子 (>) 表示直接的子关系。而 Descendant 组合器 ( ) 将适用于直接和间接子代。

考虑到这一点。选择器div * .test 将采用类test 的元素，这些元素是div 的子元素的子元素。而且，由于我们使用的是后代组合器，因此它们可以是间接子代。

但是，div .test 将采用 test 类的元素，这些元素是 div 的子元素。

因此，div .test 将选择<div><span class="test">test</span></div> 中的span。然而，div * .test 不会，因为在 div 和 span 之间没有其他元素。

他们都会在<div><p><span class="test">test</span></div> 中选择span。 在这种情况下，* 匹配 p 元素。然而，没有必要匹配它，因为我们使用的是后代组合器。在这种情况下，使用* 会给浏览器带来额外的工作。

请注意，div * 和 div 选择的元素不同。 div * 选择 div 的所有子代。而div 选择所有div。

---

顺便说一句，作为一般规则，选择器越简单，浏览器就越容易检查它。浏览器通常的实现会向后检查这些选择器（从匹配最右边的部分开始）。这意味着对于div *，浏览器必须检查页面上的每个元素以查看它是否在div 内。因此，选择器越短越具体越好。

例如，如果您只希望类为 test 的元素是 div 的直接子元素，请使用 div > .test。这样一来，浏览器就不会爬上 DOM 来查找是否存在包含该元素的 div。

当然，如果你能摆脱.test，那就更好了。

---

*.test 将获取类为test 的所有元素，与.test 相同。

---

根据测试您的选择，使用border: 1px solid black 之类的东西。这将允许您区分何时选择元素和选择其父元素。