不包括超链接的jQuery选择器

好的，这应该是显而易见的

我有一个带有文本和链接的div。 我想更改文本的背景色，但不更改链接的背景色

<div id="one">
    Foo bar <a href="http://stackoverflow.com">link</a> barfoo 
</div>

或

及

将背景色设置为与我想要的完全相反的颜色

---

谢谢。

您的问题是，除了链接之外，您的div中没有其他元素

<div id="one">
    Foo bar <a href="http://stackoverflow.com">link</a> barfoo 
</div>

将HTML更改为

<div id="one">
    <span>Foo bar </span><a href="http://stackoverflow.com">link</a><span> barfoo </span>
</div>

（注意空格）

可以自动执行跨距插入：

$("#one").html(function(_,h){
  return '<span>'+h.replace(/<a\s+.*?<\/a>/g,function(s){
       return '</span>'+s+'<span>'
  })+'</span>';
});
$("#one :not(a)").css("background-color", "red");

你试过这个吗

$("#one").not("a").css("background-color", "red");
$("a").css("background-color", "white");

因为“#one”是包含div的，所以它为整个容器着色。在锚点后记上进行选择是保留颜色的方法

否则，可以添加如下内容，然后仅选择跨度：

<div id="one">
    <span>Foo bar</span> <a href="http://stackoverflow.com">link</a> <span>barfoo </span>
</div>

福吧巴福

---

但这不完全是语义上的。如果你正在做一些更真实的事情，少一点巴福，那可能更实用。

谢谢你，这是有道理的。但是，如果可能的话，我希望避免使用其他元素包装文本。另外，如果我可以为整个div内容设置背景，或者只设置链接，那么可以做相反的事情似乎是合乎逻辑的。您需要有一个应用样式的元素。@user2965139。

$("#one").html(function(_,h){
  return '<span>'+h.replace(/<a\s+.*?<\/a>/g,function(s){
       return '</span>'+s+'<span>'
  })+'</span>';
});
$("#one :not(a)").css("background-color", "red");

$("#one").css("background-color", "red");
$("#one a").css("background-color", "white"); // give the color of what's behind the div

$("#one").not("a").css("background-color", "red");
$("a").css("background-color", "white");

<div id="one">
    <span>Foo bar</span> <a href="http://stackoverflow.com">link</a> <span>barfoo </span>
</div>