html - css 中 p .classname{} 和 .classname p{} 有什么区别？

Question

我需要一个段落是红色的吗？

1. p .target{颜色：红色；字体大小：18px}；

2. .target p{颜色：红色；字体大小：18px}；

哪一项工作以及它在呈现 HTML 文档时的行为方式。

Answer 1

p .target{ ... }

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

.target p{ ... }

... 的意思是“将此样式应用于任何属于 a<p>的元素，该元素位于具有类的元素内部target”。

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

parent child { ... }

... 将给定的样式应用于 type 的元素child，只要它在给定的parent.

Answer 2

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

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

在示例 1 中，您在节点的子节点中查找具有类target名的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>