您所在链接的 css 选择器

Question

是否有一个 CSS 选择器可以在您使用链接时使用。例如，如果我在我的网站的主页上，它被称为default.aspx，并且页面上有一个指向default.aspx的链接，我希望它重新格式化default.aspx链接。我还没有见过用于此目的的 CSS 选择器。我什至不知道是否可能，但如果可能的话，我希望有人知道。如果有一种方法可以在没有 css 选择器的情况下做到这一点，请也告诉我。

Answer 1

同一/当前页面没有特定的 CSS 选择器。但是还有其他选项可以选择指向特定页面/锚点的链接（尽管您可能会寻找^=属性选择器）。你可以这样做：

• a[href="default.aspx"]（考虑到您位于default.aspx）。

  这将选择所有href 值恰好为 default.aspx 的链接（a标签）。这仅包括以下类型的链接：<a href="default.aspx">...</a>

  • 优点：具体。
  • 缺点：非常具体；它只会选择 href 中具有确切文本的锚点，而不是像 default.aspx#something 这样的东西。

• a[href^="default.aspx"]（考虑到您位于default.aspx）。

  这将选择href 值以 default.aspx 开头的所有链接。其中包括以下类型的链接：<a href="default.aspx">...</a>、<a href="default.aspx?somekey=somevalue">...</a>、<a href="default.aspx#something">...</a>等。

  • 优点：它涵盖了多种情况。
  • 缺点：它也排除了多种情况（例如，它不会选择http://mysite/default.aspx类型的链接，即使它们是您想要的类型）。

• a[href*="default.aspx"]（考虑到您位于default.aspx）

  这将选择href 包含字符串 default.aspx的所有链接（无论在哪个位置）。其中包括<a href="default.aspx">...</a>、<a href="http://mysite/default.aspx">...</a>、<a href="https://mysite/default.aspx?key=value">...</a>等链接。

  • 优点：它是您可以使用的最通用的，将选择包含页面名称的所有内容。
  • 缺点：它太通用，可能会选择您不想要的链接（例如：<a href="page2.aspx?source=default.aspx">...</a>即使它没有指向链接所在的同一页面，也会被选择）。

• a[href^="#"]

  这将选择指向页面内锚点的链接（href 值以 # 开头）。由于锚点位于同一页面内，因此无需指定文件名。其中包括这样的链接：<a href="#something">...</a>。

  • 优点：它只选择页面内锚点的链接。
  • 缺点：它只选择页面内锚点的链接。

考虑到第一个选择器的具体性以及第三个选择器的通用性，我将选择第二个和第四个选择器的组合：

a[href^="default.aspx"], 
a[href^="#"] {
    // styles to highlight links to self
}

而且这个解决方案仍然是针对default.aspx的（从其他页面到default.aspx的链接也会突出显示）。一种替代方法是使用选择器中每个页面特定的类。例如，如果 default.aspx 具有 class .default，并且 page1 具有 class .page1，等等：

.default a[href^="default.aspx"], 
.page1 a[href=^="page1.aspx"],
a[href^="#"] {
    // styles to highlight links to self
}