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

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 锚点放置了一个图标，例如

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

我的问题是，如果将 id 赋予 href，是否可以取消设置内容。主要问题是我的锚点 ID 永远不一样。

Answer 1

您可以使用 :not selector combined with an attribute selector。然后将 content 的 ::before 的值设置回其默认值，即 normal ，为了让它消失（或使用 diplay: none，它们都适用于你的情况）。

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector.

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

Answer 2

:not()否定伪class会是我的首选。这已经在其他答案中提供了。第二种选择是创建另一个规则来为具有 ID 属性的锚元素设置样式：

a[id] { ... }

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

6.3. Attribute selectors

[att]

Represents an element with the att attribute, whatever the value of the attribute.

Answer 3

您需要select属性上的select或[enterAttributeHere]与:not或select或。因此，其基本格式为

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 contains/starts with/Ends with/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 属性，则覆盖伪元素 ::before

Override pseudo element ::before if the element has an ID attribute

html

css

hyperlink

pseudo-element