Css 后代和子选择器

为什么“

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>

a

标签为绿色

使用子体选择器时：

p a {
  color: green;
}

p > a {
  color: green;
}

a

标签为绿色

---

是什么使子体成为子体，子体成为子体？

在这种情况下，

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>

这一页是作者写的

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

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

如果使用
pa
，则样式将应用于任何
p
元素内的所有
a
元素

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


例如，如果您有

您的选择器名称混淆了<代码>>
是子选择器。在您的情况下，唯一的后代是孩子，因此没有区别。在
span
或其他东西中包装一个锚点，然后观察其中一个选择器停止工作。子对象是子对象的子集。这两个选择器都工作，因为
a
元素既是子元素又是子元素。