Предоставление классов элементам для их стилизации в фундаменте 5

Question

Я даю классы элементам, чтобы их стиль, и все хорошо, но одно не так. Актив. Не делает ничего. Это должно изменить цвет. Что случилось с моим кодом?

<nav class="top-bar"> 
    <ul class="title-area"> 
     <li class="name"><h1><a href="#">Queen</a></h1></li> 
    </ul> 
    <section class="top-bar-section">     
    <ul class="left">   
    <li class="divider"> </li> 
    <li class="active"> <a href="#">Menu Item 1</a></li> 
    <li class="divider"> </li> 
    <li><a href="#">Menu Item 2</a></li> 
    </ul> 
    </section> 
    </nav> 

.top-bar-section ul li:hover > a { 
    background: #272727; 
    color: white; } 
.top-bar-section ul li.active > a { 
    background: yellow; 
    color: white; } 
.top-bar-section ul li.active > a:hover { 
     background: #0078a0; } 

Это работает, когда я пишу эту вещь: .top-бар сечение ul.left li.active {}, но эй, он должен работать, не подвергая .left здесь тоже не так ли? ну это не

Answer 1

Я точно знаю, что вы проходите через Tomas.R, и то, что он сводит до CSS Специфика. Каков причудливый способ сказать, что более конкретным селектором/правилом CSS является большее его влияние. С .top-bar-section ul.left li.active работает, но .top-bar-section ul li.active не думаю, что где-то в CSS в CSS есть селектор/правило, которое более конкретно, чем .top-bar-section ul li.active.

Отличный способ определить, как конкретные селекторы/правила конкретного фонда предназначены для использования инструментов разработки вашего браузера, обычно F12, и посмотрите на элемент/тег, который вы хотите изменить. Если вы видите, что Фонд был очень подробным в определении селектора/правила CSS, вам нужно будет сделать то же самое.

Помните, что вы не должны быть более конкретными, так же, как конкретные, так как селекторы Фонда/правила, до тех пор, как вы «ближе» к элементу/тега, как в:

<link rel="stylesheet" href="css/foundation.min.css" />` 
    <link rel="stylesheet" href="css/site.css" /> 

Этот ваш site.css будет ближе к вашему HTML, а затем к CSS.

Чтобы получить лучшее представление о CSS Специфичность проверить эти ссылки:

• Specifics on CSS Specificity
• CSS Specificity: Things You Should Know
• Specificity

Наконец, в зависимости от того, сколько вы планируете настройка может быть лучшей стратегией для изучения SASS. Zurb получает вас с Getting Started With Sass, и есть много отличных уроков онлайн, чтобы забрать, где он уходит.

Я надеюсь, что это поможет.