如何使用CSS选择器选择所有非空锚链接？

Question

嘿，我正在搜索CSS选择器以选择所有非空锚链接，其中锚本身不为空。

我已经有了一个选择器，以便选择所有具有anchor属性的链接-参见以下示例：

a[href*=\#] {
  background-color:#f00;
}

<div id="sample">
<p>
Hey bro, yesterday I was walking about 50 
<a href="http://www.example.com">example</a> 
kilometers down this shiny road. 
After watching <a href="#friends">my friends</a> smoking a 
<a href="#">shiny cigarette</a> the air became dark 
<a href="http://example.com/#">and</a>
 my fancyness 
<a href="http://www.example.com/#inc">increased</a>.
</p>
</div>

但是我想要的是选择所有带有href =“＃something”的锚点，而排除所有锚点在哪里href="whatever#"。

这样就不会选择“闪亮的香烟”和“和”。

你能帮我这个忙吗？

Answer 1

a[href*=\#]:not([href$=\#]) {
  background-color: #f00;
}

<div id="sample">
  <p>
    Hey bro, yesterday I was walking about 50
    <a href="http://www.example.com">example</a> kilometers down this shiny road. After watching <a href="#friends">my friends</a> smoking a
    <a href="#">shiny cigarette</a> the air became dark
    <a href="http://example.com/#">and</a> my fancyness
    <a href="http://www.example.com/#inc">increased</a>.
  </p>
</div>

在上面的示例中，选择了所有包含（*）的属性值#，但排除了以（$）结尾的那些值#。

a[href*="value"] - the attribute value *contains* the specified value
a[href$="value"] - the attribute value *ends with* the specified value
a[href^="value"] - the attribute value *starts with* the specified value
a[href="value"]  - the attribute value *matches exactly* the specified value

此处更多内容：https：//www.w3.org/TR/css3-selectors/#selectors