Question

我在网站上为所有a个链接添加了一些伪元素。

#main-content .content .post-inner .entry p a::before {
    content: "\f08e";
    font-family: FontAwesome;
    margin-left: 2px;
    margin-right: 3px;
    font-size: 12px;
}

这工作正常，后来我意识到它也为Link Anchor放置了一个图标作为示例

<a id="anchorname"></a>

我的问题是，如果id被赋予href，则可以取消设置内容。这个问题的主要问题是我的锚ID从不相同。

Answer 1

您可以将:not选择器与an attribute selector结合使用。然后将内容的 :: before 的值恢复为默认值 normal ，以便将其设置为 dissapear（或使用 diplay：none ，它们都适合你的情况。）

否定CSS伪类，不是（X），是一个以简单的选择器X作为参数的功能表示法。它匹配一个未由参数表示的元素。 X不得包含另一个否定选择器。

#main-content .content .post-inner .entry p a:not([id])::before { content: normal; }

Answer 2

:not()否定伪类将是我的第一选择。已经在其他答案中提供了这些内容。第二个选项是创建另一个规则，用于为具有ID属性的锚元素设置样式：

a[id] { ... }

您只需要注意代码中规则的顺序及其特殊性。

6.3. Attribute selectors

<强> [ATT]

表示具有att属性的元素，无论属性的值是什么。

Answer 3

您需要在属性选择器[enterAttributeHere]上与:not选择器一起选择。因此，基本格式是

a:not[id]

快速演示如下：

a {
  background: tomato;
  height: 30px;
  width: 100px;
  display: block;
  margin: 5px;
}
a:not([id]) {
  background: blue;
}

<a href="#">test</a>
<a href="#" id="one">test</a>
<a href="#">test</a>
<a href="#" id="two">test</a>
<a href="#">test</a>

如果您需要更具体，例如，如果id包含/以/ Ends开头，/ etc是某个值，您可以使用^*

进一步指定

[id] {
  /* Attribute exists */
}

[id="foo"] {
  /* Attribute has this exact value */
}

[id*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[id~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[id^="foo"] {
  /* Attribute value starts with this */
}

[id=|"foo"] {
  /* Attribute value has this in a dash-separated list somewhere */
}

[id$="foo"] {
  /* Attribute value ends with this */
}

^{*来自CSS-tricks}

如果元素具有ID属性，则覆盖伪元素::之前

3 个答案: