Question

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

因此，以小提琴为例，我想要一种方法来改变“链接1”，“链接2”和“链接3”的背景颜色，而不是使用通用的“.links”类。

<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是不可能的，因为目前有no parent selector。

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

Example Here

.links {
    background-color:#ccc;
}

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

作为替代方案，您还可以使用以下内容。值得注意的是，此方法仅可以与您当前的HTML一起使用。 (example)

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

如果您需要jQuery解决方案，可以使用以下内容。它将选择不属于a元素的所有p个元素。

Example Here

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

样式链接不在某个元素内

1 个答案: