Question

a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
}

a:-webkit-any-link{
    text-decoration: none !important;
}

/*Navigation*/

.nav ul {
    margin: 0;
}

.nav li {
    display: inline;
}

.nav a {
    display: inline-block;
    padding: .5em;
    color: white;
    text-decoration: none;
}

.main-nav {
    text-align: center;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.nav a:hover {
    background-color: rgba(255, 255, 255, .3)
}

.search-container{
    position: fixed;
    top:3rem;
    right:0;
}

#search-container a{
    text-decoration: none;
}

 <header class="main-header">
            <nav class="main-nav nav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="store">STORE</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="fans">FANS</a></li>
                </ul>
            </nav>
</header>

        <section class="search-container" id="search-container">
            <input type="text" id="search-text" placeholder="Search..">
            <p id="feedback"></p>
            <a href="/store?category=music" >MUSIC</a>
            <a href="/store?category=merch" >MERCH</a>
            <a href="/purchase" style="text-decoration: none">CART</a>
        </section>

因此，我在EJS文件中具有那些链接，并且希望它们不带有下划线。在同一文件中，有一些<nav class="nav"><li><a href="/store">Link</a></li></nav>我很容易写

.nav a {
    text-decoration: none;
}

它就像魅力。但是不知何故，下面的那些不会！

<section class="search-container" id="search-container">
    <a href="/store?category=music" >MUSIC</a>
    <a href="/store?category=merch" >MERCH</a>
    <a href="/purchase" style="text-decoration: none">CART</a>
</section>

我尝试了谷歌搜索和各种方法。查看我尝试过的内容：

a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
}

a:-webkit-any-link{
    text-decoration: none !important;
}

#search-container a{
    text-decoration: none;
}

以上方法均无效，我认为是

a:-webkit-any-link {
    text-decoration: underline;
}

总是出现。但是从以上任何代码来看，它们应该被覆盖，不是吗？

最后，我尝试了内联样式，例如：

<a href="/purchase" class="btn btn-primary" style="text-decoration: none">CART</a>

终于可以了。菲 1. style.css已正确链接，否则导航链接将不起作用，其他样式也将无效。 2.该问题在Linux上的Chromium和Firefox中均出现。 3.我尝试了片段，但根本无法复制我的问题。 4.我确实使用了很多技术，例如添加id甚至！important，但是似乎没有一种技术可以覆盖顽固的a：-webkit-any-link {text-decoration：underline; }。

我只是想知道为什么会这样？

Answer 1

我决定复制CSS，然后重新粘贴。它现在可以以某种方式工作，并且我不再需要嵌入式样式。不知道，但是它解决了问题！

Answer 2

在我的例子中，当 true 标签没有定义 <a> 或 href 时，光标指针没有显示（导航实际上是在点击事件和 [routerLink] 上完成的） .

我定义了空的 router.navigate() 并且现在显示光标指针并且导航不受影响。（使用空的 [routerLink]="" 而不是这种情况）。

另外值得一提的是，将 href="" 添加到 [routerLink] 以外的元素不会像 <a> 那样让我获得光标。将 href 添加到元素的样式可以在本地完成此操作，但在部署到服务器时不起作用。

cursor: pointer

a：-webkit-any-link {text-decoration：下划线; }只能以内联样式编写，为什么？

2 个答案: