css - 组合共享一个类的 2 个菜单 ID 元素，并为该类添加不同的背景

Question

@media (min-width: 993px)
    body .main-navigation ul.menu li.menu-item-has-children.full-width > .sub-menu-wrapper {
        background-image: url(http://example.com/image1.jpg)
        height: 500px;
        background-repeat: no-repeat;
        background-position: center right;
    }

<li id="nav-menu-item-12169" menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
    <a href="#" class="menu-link main-menu-link"><span>Home</span></a>
    <span class="caret"></span>

    <div class="sub-menu-wrapper">
        <div class="container">
            <ul class="sub-menu">
            </ul>
        </div>
    </div>
</li>

<li id="nav-menu-item-12809" menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
    <a href="#" class="menu-link main-menu-link"><span>Water</span></a>
    <span class="caret"></span>

    <div class="sub-menu-wrapper">
        <div class="container">
            <ul class="sub-menu">
            </ul>
        </div>
    </div>
</li>

我已经向子菜单包装器添加了背景图像，当然该图像适用于两个菜单项......

有没有办法将菜单 ID 与类子菜单包装器结合起来，然后添加背景图像？

这是我正在尝试做的最好的例子......

#nav-menu-item-12169 + .sub-menu-wrapper Has background image 1
#nav-menu-item-12809 + .sub-menu-wrapper Has background image 2

Answer 1

nav-menu-item-12169 > .sub-menu-wrapper{
    background-image: url('img1.jpg');
}

nav-menu-item-12809 > .sub-menu-wrapper{
    background-image: url('img2.jpg');
}

Answer 2

使用 CSS 子选择器>将解决您的问题：

#nav-menu-item-12169 > .sub-menu-wrapper {
    background-image: url('img1.jpg');
}

#nav-menu-item-12809 > .sub-menu-wrapper {
    background-image: url('img2.jpg');
}