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

Question

嘿，我正在寻找一个 CSS 选择器来选择所有非空锚链接，其中锚本身不为空。

我已经有一个选择器来选择所有具有锚属性的链接 - 参见这个例子：

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

Answer 2

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

^= 运算符表示以

开头

这是你想要的吗？

去掉#后面的空

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