Question

我尝试从其中一项中删除现有的CSS

以下是我的代码

    <div class="main-navigation-inner">
            <div class="menu">
<ul
    <li id="menu-item-1406" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1406"><a href="#">Item one</a></li>

    <li id="menu-item-1553" class="nav_number menu-item menu-item-type-custom menu-item-object-custom menu-item-1553"><a title="Phone us today">121212</a></li>
    </ul></div>

它后面的CSS看起来像这样

.main-navigation .menu > ul > li > a:hover, .main-navigation .menu > ul > li.active-menu-item > a {
    -webkit-box-shadow: 0 2px;
    box-shadow: 0 2px;
}

我为从最后一个菜单项中删除效果而添加的css看起来像这样

尝试1

  #site-navigation .main-navigation-inner .menu #menu-item-1553{
    -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;

    }

TRY 2 - i have tried this to check if there will be any effect on the properties and values but nothing has changed

    .main-navigation .menu > ul > li > a:hover,
            .main-navigation .menu > ul > li.active-menu-item > a {
                -webkit-box-shadow: 0 0 !important;
                        box-shadow: 0 0 !important;
                        -moz-box-shadow:0 0 !important;
            }

Answer 1

您的CSS专用性太高，我不明白为什么有必要。如果可能，请尝试简化您的代码。

为回答您的问题，您最初将框阴影应用于锚点，然后尝试从LI而不是锚点中删除框阴影。以下代码应该可以工作：

#menu-item-1553 a:hover {
-webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;

}

上面的代码应该起作用。

Webkit-box阴影不能从一个菜单项中删除

1 个答案: