Question

我有这个CSS：

.post-content a {
  text-decoration:none !important;
  border-bottom: 2px solid #75d54f!important;
  box-shadow: inset 0 -4px 0 #75d54f;
  color: inherit;
  transition: background 0.1s cubic-bezier(.30,.60,.60,1);
}

.post-content a:hover {
  box-shadow: inset 0 -4px 0 #75d54f!important;
  color: inherit !important;
  transition: background 0.1s cubic-bezier(.30,.60,.60,1) !important;
  background:#75d54f;
}

这会将样式应用于wordpress帖子中的所有a元素。现在有一些a元素，我不想要这样的样式。我该如何排除它们？

有些人定义了一个类（例如<a class="jp-relatedposts-post-a"）而其他人没有定义，但更可能有一个定义了类的父元素，所以我可以使用它。

底线，如何使用他们的班级（或ID）或他们的父班级排除某些元素

现在我将其添加到解决方案中：

#toc_container a {
  border-bottom: none !important;
  box-shadow: none !important;
  color: inherit !important;
  transition: none !important;
  background:transparent;
}

#toc_container a:hover {
  border-bottom: none !important;
  box-shadow: none !important;
  color: inherit !important;
  transition: none !important;
  background:transparent;
}

但对于某些元素，此解决方案会搞乱事情，因为其他人可能只需要其中一些属性。例如，.et_pb_promo_button et_pb_button需要border-bottom。

Answer 1

打开开发工具。

在DOM中，找到要设置样式的元素。

Right click > Copy > Copy selector。

现在将其粘贴到您的CSS文件中，它只会应用于该元素，并应用于特定的父<div>。

您将获得该元素的完整路径。 div > div > div:nth-child(2) > a 例如。

这只是一个例子。

body > header > .someclass > div > div:nth-child(2) > a {
 color: #000;
}

这仅适用于特定元素header内的锚点，只适用于一个元素。

Answer 2

也许使用：not selector（https://developer.mozilla.org/de/docs/Web/CSS/:not）

因此，例如，如果你想用类＆＃34; jp-relatedposts-post-a＆＃34;排除所有元素。从默认格式，你可以这样做：

.post-content a:not(.jp-relatedposts-post-a) {

如何从css选择中排除元素

2 个答案: