A:-webkit-any-link {украшение текста: подчеркивание; } можно писать только в инлайн-стиле, почему?

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. Проблема возникает как в Chromium, так и в Firefox в Linux. 3. Я попробовал сниппеты, но они никак не могут повторить мою проблему. 4. Я использовал много методов, таких как добавление id или даже !important, но ни один из них, кажется, не перезаписывает упрямую ссылку a:-webkit-any-link { text-decoration: underline; }.

Мне просто интересно, почему это происходит?