样式链接不在特定元素之内

Question

使用子选择器，我只能更改'p'标记内的'a'元素，但是是否有类似的方法仅更改不在'p'标记内的那些元素？ 添加其他类不是一种选择。

因此，以小提琴为例，除了使用通用的“ .links”类之外，我还想一种方法来更改'Link 1'，'Link 2'和'Link 3'的背景颜色。

http://jsfiddle.net/pixeloco/Nuy9a/

<p>Lorem ipsum dolor <a href="#" class="links">click me</a></p>
<a href="#" class="links">Link 1</a>
<a href="#" class="links">Link 2</a>
<a href="#" class="links">Link 3</a>

Answer 1

不，由于纯CSS目前没有父选择器 ，因此这是不可能的。

但是，您可以使用以下解决方法。 只需设置所有.links元素的样式.links 。 然后，只需选择.links p元素的子元素.links即可重置样式。

这里的例子

.links {
    background-color:#ccc;
}

p > .links {
    background-color:transparent;
}

或者，您也可以使用以下内容。 值得注意的是，该方法仅适用于您当前的HTML。 （例）

p ~ a.links {
    background-color:#ccc;
}

---

如果您需要jQuery解决方案，则可以使用以下方法。 它会选择所有a不属于的子元素p元素。

这里的例子

$('a:not(p a)').css('background','#ccc');