Question

我有一个wordpress。我使用一页主题，所以当我向下滚动时，wordpress会创建一个粘性菜单。默认情况下，我有：

<header id="masthead" class="site-header" role="banner">
    <div class="header-wrap">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-8 col-xs-12">
                    ...
                </div>
                <div class="col-md-8 col-sm-4 col-xs-12">
                    <div class="btn-menu"></div>
                    <nav id="mainnav" class="mainnav" role="navigation">
                        <div class="menu-menu-1-container">
                            <ul id="menu-menu-1" class="menu">
                                <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-6">
                                    <a href="/">Strona główna</a>
                                </li>
                                <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611">
                                    <a href="#">Cennik</a>
                                </li>
                                <li id="menu-item-501" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-501">
                                    <a href="#">Kontakt</a>
                                </li>
                            </ul>
                        </div>
                    </nav><!-- #site-navigation -->
                </div>
            </div>
        </div>
    </div>
</header>

当我向下滚动jQuery时，将float-header类添加到标头：

<header id="masthead" class="site-header fixed float-header" role="banner">

那我的代码为什么不起作用？

.float-header > div > div > div > div > .mainnav > div > ul > li > a{
    color: black;
}

感谢帮助。

Answer 1

当我尝试运行它时，它可以完美运行...

所以我想是因为您的css被其他原因覆盖了，而我使用!important ..来进行事件覆盖。

了解有关!important：https://css-tricks.com/when-using-important-is-the-right-choice/

.float-header .mainnav ul li a{
    color: red!important;
}

<header id="masthead" class="site-header fixed float-header" role="banner">
    <div class="header-wrap">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-8 col-xs-12">
                    ...
                </div>
                <div class="col-md-8 col-sm-4 col-xs-12">
                    <div class="btn-menu"></div>
                    <nav id="mainnav" class="mainnav" role="navigation">
                        <div class="menu-menu-1-container">
                            <ul id="menu-menu-1" class="menu">
                                <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-6">
                                    <a href="/">Strona główna</a>
                                </li>
                                <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611">
                                    <a href="#">Cennik</a>
                                </li>
                                <li id="menu-item-501" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-501">
                                    <a href="#">Kontakt</a>
                                </li>
                            </ul>
                        </div>
                    </nav><!-- #site-navigation -->
                </div>
            </div>
        </div>
    </div>
</header>

如何将CSS样式添加到新元素

1 个答案: