无法从一个菜单项中删除 Webkit-box 阴影

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 阴影

Webkit-box shadow cannot be removed from one menu item

css

wordpress

webkit

box-shadow