Установка атрибутов для различных элементов в классе CSS

Question

Это единственный способ сделать это? Я попытался создать div с классом navbar, чтобы он применял этот класс к содержащимся в нем элементам, но он не работает. Есть ли способ избежать ручного применения класса к каждому отдельному элементу? Спасибо.

<ul class="navbar">
    <li class="navbar"><a href="index.html"  class="navbar">Home</a></li>
    <li class="navbar"><a href="images.html"  class="navbar">Images</a></li>
</ul>

добавление скриншота моего CSS

Спасибо

Answer 1

HTML

<ul class="navbar">
    <li>
        <a href="index.html">Home</a>
    </li>
    <li>
        <a href="images.html">Images</a>
    </li>
</ul>

CSS

Добавьте правила внутри скелета ниже.

 .navbar {
 }

    .navbar > li {
    }

        .navbar > li > a {
        }

        .navbar > li > a:hover {
        }       

для развлечения

Я хотел включить это, хотя отвечал на это выше. Не думайте, что определение классов для дочерних элементов - плохая практика. На самом деле, когда вы узнаете об OOCSS или BEM, вы увидите, что его часто поощряют. Преимущество состоит в том, что ваша разметка может измениться, и вам не придется вносить изменения в свой CSS.

.navbar {
}

    .navbar__item {
    }

        .navbar__link {
        }

        .navbar__link:hover {
        }       

Answer 2

Если вы хотите самый простой способ добавить класс, не делая это вручную, вы можете использовать jquery в противном случае, для части css вы можете использовать только класс для ul и никаких классов для li, если вы хотите, чтобы li имел использование определенного стиля: nth-child (число),: first-child или: last-child.

А, а для css используйте:

.navbar li вместо использования li.navbar, потому что вам не нужно указывать li, который вы хотите настроить, если вы определяете, какой div вы настраиваете.

Надеюсь, я тебе помог,

Привет.