Question

我可以在链接中添加一个带有CSS的图标，如

CSS

[href^="/path/"] {background-image: url(/icon-image.png);}

像

这样的链接

<a href="/path/xyz/abc/test.html">Test</a>

但它不适用于像

这样的链接

<a href="test.html">Test</a>

但此链接指向/path/xyz/abc/test.html，因为test.html位于/ abc /

a[href*="path"]也无效

我的链接大多看起来像/ path-x / path-y / path-z /，因为链接通常只有index.php。

如何更改路径/路径/中所有链接的css代码，它也适用于第二个示例中的链接。

Answer 1

你的问题不清楚，但我会尝试回答我能说的任何问题。

如果您的问题是无法使用正确的css选择器，您可以使用

[href$=".html"]

匹配以href结尾的所有.html属性。现在，如果您想要的是将相同的样式应用于所有链接，包括具有[href^="/path/"]选择器和具有其他选择器的链接，那么只需将它们放置如下：

[href^="/path/"], [href$=".html"] {
    background-color: blue
}

我建议你进一步阅读attribute selectors on MDN。您可以阅读它们在那里的工作方式，并按照您希望的方式选择。

Answer 2

CSS选择器匹配DOM中属性的文字值。您无法按照自己的方式处理CSS。

Answer 3

<!--HTML File-->

<a href="http://home.com" id="logo">Your logo</a>
<!--CSS File-->
#logo {
background-image: url(images/logo.png);
display: block;
margin: 0 auto;
text-indent: -9999px;
width: 981px;
height: 180px;
}

用图标展开CSS链接

3 个答案: