在HTML中动态移动结束标签的位置

Question

这个问题的解决方案感觉就在我的舌尖上，但是我不知道怎么做。考虑下面的HTML:

<span>This has some text.
    <span>This has some more text.</span>
    <span>And so on.</span>
    <span>And so forth, et cetera, et cetera, et cetera...</span>
</span>

每个span都有一个点击监听器:

$("span").click(function()
{
    $(this).css("color", "somecolor");
}

当PARENT span的css改变时，是否有办法防止css改变传播到子元素?或者一种只使更改影响单击span中的TEXT的方法?

我知道有一些重新组织html的方法可以使它更容易，但是我正在处理由我无法更改的遗留系统自动生成的非常不规范的html。

Answer 1

总之，没有。这就是CSS的"级联"部分。

您必须添加专门的CSS来撤消对这些子元素所做的更改。例如:

$("span").click(function() {
    $(this).css("color", "blue")
        .children().css("color","black");
});

根据您的HTML的确切外观，您可能需要阻止点击传播到最外层的span:

$("span").click(function() {
    e.stopPropagation();
    $(this).css("color", "blue")
        .children().css("color","black");
});

一个可能不太复杂的解决方案是使用!important来确定子span的CSS样式:http://jsfiddle.net/mblase75/ce2Av/2/但是，您需要以这种方式指定所有外部span的子元素，根据您的HTML，这可能会变得复杂。

如果你不希望孩子们都是一种颜色，而是保持他们之前的颜色，那么事情就变得棘手了。您必须事先使用数组缓存这些值，然后逐个重新分配它们。

Answer 2

单击停止事件传播并向span添加一些类。在CSS中创建两个规则:通用规则用于span，另一个用于class。子元素在点击时不受影响。

Javascript

$("span").click(function(e){
    e.stopPropagation();
    $(this).addClass("special");
});

CSS

span{
    color:#DDD;
}
.special{
    color:#0077cc;
}