刷新 jQuery 中的元素样式

Question

在我的 JavaScript 中，我将元素动态附加到 div，如下所示：

$('.class-name').after('<p class="foo">Hello World!</p>')

在我的 CSS 中，我有这样的东西：

p .foo {
    color: green;
}

当我测试它时，出现了新的段落元素，但文本保持黑色。这是文档没有读取 "p" 元素的 class 的情况吗？或者 class "foo" 不适用于生成的元素？

Answer 1

尝试在段落标记和 class 之间去掉 space。

p.foo {
    color: green;
}

这是包含 class 的段落，没有包含 class 'foo' 的嵌套元素。

Answer 2

您的规则定义略有偏差。你拥有的是 "elements with the class foo that are inside of a p element".

您的意思是元素是 p 元素并且具有 class foo，即

p.foo { color: green; }

Answer 3

这应该是你的风格：

p.foo {
   color: green;
}

删除 "p" 和 "foo" 之间的空白 space。

Refreshing element styles in jQuery