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中，您在target节点的desendant节点中查找具有类名p的节点

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

在示例2中，您正在名为p的类的后代节点中查找target标记

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