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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

#

更多信息：https://www.w3.org/TR/css3-selectors/#selectors

Answer 2

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

^=运算符表示以

开头

这是你想要的吗？

消除＃后面没有任何内容

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

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

2 个答案: