Какая правильная последовательность вложенности CSS для целевого элемента, который мне нужен?

Question

Я пытаюсь применить некоторые стили к элементу подменю, который я обозначил с помощью класса 'menu-mine', но я не уверен в правильности используемой последовательности вложений.

Я пытаюсьизмените часть моего меню, изменив размер шрифта и убедившись, что он написан заглавными буквами, но у меня возникают проблемы с правильной версией вложенных селекторов.

Я хочу применить его только к заголовку меню с классом menu-mineв ссылке.Я не могу применить класс css к любому другому селектору, так как я работаю с Joomla.Это (отредактированная) версия меню, и рассматриваемый селектор 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;
}

Ожидаемый результат - заголовок меню «Опал» будет в верхнем регистре с указанным размером шрифта.

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>