Question

我正在尝试对我用“菜单-矿”类指定的子菜单项应用某种样式，但是我不确定要使用的嵌套顺序正确。

我正在尝试通过更改字体大小并确保其为大写来变换菜单的一部分，但是在正确选择嵌套选择器时遇到了困难。

我只想将其应用于链接中带有“ menu-mine”类的菜单标题。我在使用joomla时无法将css类应用于任何其他选择器。这是菜单的（已编辑）版本，相关的CSS选择器位于“ OPAL”部分。

<nav class="navbar navbar-mainmenu visible-md-block visible-lg-block vpf-mainmenu affix-on-scroll" role="navigation">
        <div class="container">
            <div class="inner-container">
                <div class="collapse navbar-collapse vpf-mega-menu-container">
                    <ul class="nav navbar-nav vpf-menu" data-animate="slide" data-easing-open="linear" data-easing-close="linear" data-easing-time="100">
// other code

<li class="menuitem item-464 level-2 submenu col-xs-4"><a class="menu-mine" href="/index.php/en/by-stone/opal" ><span class="menu-group"><span class="menu-title">OPAL</span></span></a></li>
<li class="menuitem item-465 level-2 submenu col-xs-4"><a href="/index.php/en/by-stone/citrine-by-stone" ><span class="menu-group"><span class="menu-title">CITRINE</span></span></a></li>
</ul>
                </div>
            </div>
        </div>
    </nav>

这行不通。

.navbar-mainmenu .navbar-nav li.level-2 > a.menu-mine, .navbar-mainmenu .navbar-nav li.level-2 a.menu-mine span.menu-group > span {
 font-size: 14px;
 text-transform: uppercase;
}

预期结果是菜单标题“ Opal”将使用大写字母并使用指定的字体大小。

Answer 1

似乎您只需要包含first-of-type。我已将其添加到您的声明中，而未建议任何其他修改。我添加了color: red，以使研究人员更清楚地了解输出。

.navbar-mainmenu .navbar-nav li.level-2:first-of-type a.menu-mine,
.navbar-mainmenu .navbar-nav li.level-2:first-of-type a.menu-mine span.menu-group > span
{
 font-size: 14px;
 text-transform: uppercase;
 color: red;
}

<nav class="navbar navbar-mainmenu visible-md-block visible-lg-block vpf-mainmenu affix-on-scroll" role="navigation">
    <div class="container">
        <div class="inner-container">
            <div class="collapse navbar-collapse vpf-mega-menu-container">
                <ul class="nav navbar-nav vpf-menu" data-animate="slide" data-easing-open="linear" data-easing-close="linear" data-easing-time="100">
                  <li class="menuitem item-464 level-2 submenu col-xs-4"><a class="menu-mine" href="/index.php/en/by-stone/opal" ><span class="menu-group"><span class="menu-title">OPAL</span></span></a></li>
                  <li class="menuitem item-465 level-2 submenu col-xs-4"><a href="/index.php/en/by-stone/citrine-by-stone" ><span class="menu-group"><span class="menu-title">CITRINE</span></span></a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

什么是正确的CSS嵌套顺序以定位我需要定位的项目

1 个答案: