Question

我已经知道CSS中存在一个所谓的“孙子”选择器，直到我看到article。我玩过它。在我看来，它只是通用选择器（选择所有元素）。

考虑以下演示：

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
}

.wrap * p {
  width: 400px;
  height: 100px;
  background-color: green;
  margin: 10px;
  color: red;
}

<div class="wrap">
  <div class="item1">
    <p>First</p>
    <div class="item2">
      <p>Second</p>
      <div class="item3">
        <p>Third</p>
      </div>
    </div>
  </div>
</div>

如果我们从*中删除了.wrap * p没有任何更改。

它与.wrap p（父空白孩子）基本相同。

因此我的问题是：

孙子选择器*是否有意义？

div * p与div p表示法的区别？

Answer 1

是的，有区别。

父元素的后代可以有两种类型：

Direct Descendants。
间接后裔。

例如，考虑以下标记：

<div>
  <em>This is direct descendant</span>
  <p>
    p is also a direct descendant.

    <span>This is indirect descendant</span>
  </p>
</div>

在上面的代码中<em>和<p>是直接的，<span>是<div>的间接后代。

后代选择器：

在css中，空格作为后代选择器。例如：

div p { ... }

以上选择器将选择<p>内显示的所有<div>元素（直接和间接）。

在下面的代码段中，所有p元素都会继承样式。

.wrap p {
  background: green;
  color: white;
}

<div class="wrap">
  <p>Direct p of wrap</p>
  <div class="item1">
    <p>Indirect p of wrap</p>
    <div class="item2">
      <p>Indirect p of wrap</p>
    </div>
  </div>
</div>

直接后裔选择器：

>是直接后代选择器。例如：

div > p { ... }

以上选择器将选择<p>的直接后代的所有<div>元素。此选择器将仅在DOM中搜索一个级别的元素。

在下面的代码段中，只有直接p后代会继承样式。

.wrap > p {
  background: green;
  color: white;
}

<div class="wrap">
  <p>Direct p of wrap</p>
  <div class="item1">
    <p>Indirect p of wrap</p>
    <div class="item2">
      <p>Indirect p of wrap</p>
    </div>
  </div>
</div>

现在，什么是*选择器？

*是一个可以匹配任何元素的通用选择器。

间接后代选择器：

我们可以在任意两个选择器之间添加*运算符，以仅选择间接后代。例如：

div * p { ... }

上面的选择器将选择<p>内的所有<div>个元素作为间接后代（非直接）。 *和div之间的p选择器只有在{{<p>之间存在其他元素（因为*是通用选择器）时才会选择<div> 1}}和<p>。

在下面的代码段中，只有间接p个后代会继承样式。

.wrap * p {
  background: green;
  color: white;
}

<div class="wrap">
  <p>Direct p of wrap</p>
  <div class="item1">
    <p>Indirect p of wrap</p>
    <div class="item2">
      <p>Indirect p of wrap</p>
    </div>
  </div>
</div>

Answer 2

R[1 ... n2 + 1]会在n1 + n2 + 2 = r - p + 3

的任何子项中选择任何.wrap * p元素

＆＃13;

.wrap

＆＃13;

虽然.wrap * p { color: red; }也会选择<div class="wrap"> <div> <p>TEXT</p> </div> <p>TEXT 2</p> </div>作为孩子

＆＃13;

.wrap p

＆＃13;

“div p”VS“div * p”？它们是相同还是不同？

2 个答案: