a: -webkit-any-link {text-художественное оформление: подчеркивание;} может быть написано только в стиле inline, почему? - PullRequest
Новая
       2

a: -webkit-any-link {text-художественное оформление: подчеркивание;} может быть написано только в стиле inline, почему?

0 голосов
/ 17 июня 2019 

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>

Наконец-то работает. Fyi, 1. style.css правильно связан, иначе навигационные ссылки не будут работать и другие стили. 2. Проблема появляется как в Chromium, так и в Firefox в Linux. 3. Я попробовал Snippets, но это не может полностью дублировать мою проблему. 4. Я использовал много техник, таких как добавление идентификатора или даже! Важное, но, похоже, ни один из них не переписывает упрямый a: -webkit-any-link {text-ornament: underline; }.

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

1 Ответ

0 голосов
/ 18 июня 2019

Я решил скопировать мой CSS и восстановить его обратно. Каким-то образом это работает сейчас, и мне больше не нужен встроенный стиль. Понятия не имею, но это решило проблему!

...