使用 ：not() 选择器设置<a>不在元素内的元素的样式<p>

Question

我正在尝试对我的网站中没有出现在<p>内的任何<a>进行样式设置，使其看起来更像按钮。

我一直在看:not()选择器，认为这应该可以选择它们：

:not(p) a {}

然而，似乎并没有像我预期的那样奏效。我这里有一个代码笔作为的例子

https://codepen.io/pummra/pen/eYJoNqd

Answer 1

您可以使用>在两个标记之间寻址选择器中的直接子级：

:not(p) > a

否则，选择器(没有>(几乎总是适用，因为p标签内的a标签例如也是body标签的(非直接(子标签。

应用于您的Codepen示例：

a {
color: #00f;
}
:not(p) > a {
background-color: #1779ba;
color: #fefefe;
display: inline-block;
vertical-align: middle;
margin: 0 0 1rem 0;
padding: 0.85em 1em;
}

<div>
<h1>An interesting article</h1>
<p>This is an interesting article about something. There will be a bunch of copy here. Some of it might even have a <a href="http://www.google.com">link in</a>. The links in the copy would look like normal links. The links outside of the paragraph should look like buttons.</p>
<a href="#">Read more about this</a>
</div>