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").click(function()
{
    $(this).css("color", "somecolor");
}

当PARENT跨度的css发生变化时，是否有办法防止css更改传播到子元素？或者只进行更改会影响点击范围内的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/ 但是，您需要以这种方式指定 all 该外部范围的子元素，这可能会因您的HTML而变得复杂。

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

Answer 2

单击停止事件传播并将某个类添加到span。在CSS中创建两个规则 - 一般用于span，另一个用于class。点击不会影响子元素。

的Javascript

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

CSS

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

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

2 个答案: