Question

所以我真的不知道该怎么说，但是我会给它一个机会。

在我的网站上，左侧有一个导航栏。在CSS中设置了段落和链接元素的样式。现在，我的导航栏中有一个链接，该链接具有唯一的ID（唯一的ID），我不想从导航栏的CSS继承。

它看起来像这样：

writable

因此，左栏在CSS中的样式为writable。 <nav id="leftbar"> <a href="link" id="special" onclick="function()"></a> <p>Navigation area 1</p> <a href="index.html">Home</a> <a href="link">Link 1</a> <a href="link">Link 2</a> <a href="link">Link 3</a> <a href="link">Link 4</a> </nav>的样式为nav#leftbar。链接的样式为<p>和nav#leftbar p。现在，我使用nav#leftbar a向CSS添加了一个新块。但是，由于它是一个link元素，并且位于导航栏标签内，因此它仍继承了nav#leftbar a:hover的所有属性。

有什么方法可以更改它，还是必须将带有“特殊” ID的链接移到导航栏标签之外？我不想这样做，因为它是导航栏的一部分，只是有所不同。

我还尝试将#special的CSS属性添加到nav#leftbar a并进行更改以覆盖它们，但是它仍然优先考虑nav#leftbar a。

Answer 1

您可以使用:not()伪类排除具有special id的链接：

nav#leftbar a:not(#special) {
  color: red;
}

#leftbar a:not(#special):hover {
  color: gold;
}

<nav id="leftbar">
  <a href="link" id="special" onclick="function()">Special</a>
  <p>Navigation area 1</p>
    <a href="index.html">Home</a>
    <a href="link">Link 1</a>
    <a href="link">Link 2</a>
    <a href="link">Link 3</a>
    <a href="link">Link 4</a>
</nav>

Answer 2

如此

a:not(#special) {
  text-decoration:none;
  font-size:24px;
  color:red;
}

<a href="">links</a>
<a href="">links</a>
<a href="" id="special">links</a>
<a href="">links</a>
<a href="">links</a>

Answer 3

问题在于nav#leftbar a比#special更具体。前者包含一个ID和两个标签，后者仅包含一个ID。

我会将ID leftbar更改为类leftbar，并在CSS中删除其前面的标签名称，因此您将定位.leftbar a和.leftbar p。然后#special更具体，因为它包含一个ID。（类比标记重要，ID比类重要。）

如果您知道#special始终是#leftbar的第一项，则也可以使用#leftbar a:first-child之类的对象来定位它，而无需输入ID。

如何使链接不继承属性？

3 个答案: