css中p .classname {}和.classname p {}之间有什么区别？

Question

我需要一个红色的段落？

1. p .target {color：red; font-size：18px};
2. .target p {color：red; font-size：18px};

哪一个工作以及它如何表现来呈现HTML文档。

Answer 1

p .target{ ... }

...表示“将此样式应用于具有类target的任何元素，该类在<p>内”。

.target p{ ... }

...表示“将此样式应用于任何<p>元素，该元素位于具有类target的元素内”。

或者一般来说，任何形式的CSS：

parent child { ... }

...将给定的样式应用于child类型的元素，只要它在给定的parent中。

Answer 2

你在这里谈论两件不同的事情。

CSS属性被解释为parent child { property}

在示例1中，您在qazxsw poi节点的后代节点中查找具有类名qazxsw poi的节点

target

在示例2中，您正在寻找名为p的类的后代节点中的

<div class="target">
  <p>I am in red</p>
</div>

标记

p