将CSS中的样式应用于新附加的元素

Question

我动态地向父div添加一个元素.

$('.some_div').append("<li class="hi">hey!</li>")

在我的CSS中,

.hi {
  color: white;
}

但是,由于<li class="hi">动态添加,因此CSS中定义的样式似乎不适用于该元素.所以,

$('.some_div').append("<li class='hi'>hey!</li>")
$('li.hi').css({"color":"white"});

实际上会做到这一点,但对我来说这似乎是多余的,因为样式已在CSS文件中定义.这是唯一的方法吗？

更新:

$('.some_div').append('<li style="color:white" >hey!</li>')

上面的方法可行,但由于样式已在单独的CSS文件中定义,因此它仍然是多余的.我的问题是,是否有办法避免这种冗余.

在CSS中,

.some_div > li {
  font-size: 20px;
  background-color: 30px;
  margin-right: 2px;
}

.hi {
  color: white;
}

当我添加一个新元素时,所有这些都不会应用($).append(),所以我问是否有办法应用样式表中已经定义的样式,而不必在css()函数中重新定义它们.

Answer 1

你需要在这里逃避课程名称.

更改

$('.some_div').append("<li class="hi">hey!</li>");

至

$('.some_div').append("<li class='hi'>hey!</li>");

要么

$('.some_div').append("<li class=\"hi\">hey!</li>");

演示风格:

$('.some_div').append("<li style='color:green;'>hey!</li>");

要么

$('.some_div').append("<li>hey!</li>").find("li:last").css("color","yellow");