html - 您所在链接的 css 选择器

Question

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

Answer 1

同一/当前页面没有特定的 CSS 选择器。但是还有其他选项可以选择指向特定页面/ anchor 的链接(尽管您可能正在寻找 ^= attribute selector )。你可以这样做:

• a[href="default.aspx"] (考虑到你在 default.aspx)。

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

  • 优点:具体。
  • 缺点:非常具体；它只会选择 href 中具有该确切文本的 anchor ，而不是 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^="#"]

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

  • 优点:它只选择页面内 anchor 的链接。
  • 缺点:它只选择页面内 anchor 的链接。

---

考虑到第一个选择器的具体程度以及第三个选择器的一般性，我会结合使用第二个和第四个选择器:

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

而且这个解决方案仍然是真正特定于 default.aspx(来自其他页面的 default.aspx 的链接也会突出显示)。一种替代方法是使用特定于选择器中每个页面的类。例如，如果 default.aspx 具有类 .default ，并且 page1 具有类 .page1等:

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