Question

为什么将“ a标签”分类为后代而不是子级？他们看起来像是孩子而不是后代。但是，下面的两行代码以相同的方式影响它们。

<p class="note">
  This page was written by
  <a href="mailto:ivy@example.com">ivy@example.com</a>
  <a href="http://www.example.com</a>
</p>

当我使用子选择器时：

p a {
  color: green;
}

a标签为绿色

当我使用后代选择器时：

p > a {
  color: green;
}

a标签为绿色

什么使后代成为后代而使孩子成为孩子？

Answer 1

在这种情况下，p容器内的所有元素都是子代和子代，因此子代和子代组合器将呈现相同的输出。

如果您的HTML看起来像这样：

<p class="note">
   This page was written by
   <a href="mailto:ivy@example.com"><span style="color: blue">ivy@example.com</span></a>
   <a href="http://www.example.com</a>
</p>

…那么span元素将是p容器的后代，而不是子代。

想想一个正常的家庭。父母有孩子。他们既是父母的孩子（>）又是后代（）。孩子们便有了孩子。这些是原始父母的后代（），而不是他们的孩子（>）。

换句话说，子元素始终是子元素，但子元素并不总是子元素。

规格参考：

2. Selectors

E F表示E元素的F元素后代

E > F表示E元素的F元素子元素

Answer 2

如果您使用p a，则样式将应用于所有a元素内的所有p元素。

如果您使用p > a，则样式将应用于所有a元素，其中parent是p元素。

例如，如果您有
<p> <h1> <a> something </a> </h1> <p>（不要介意该DOM结构）
那么a元素就不会被p > a定位，而是被p a定位。

您可以阅读更多here。

后代和儿童选择器

2 个答案: