css - 为 CSS 类中的各种元素设置属性

Question

这是唯一的方法吗？我尝试使用导航栏类创建一个 div，因此它将将该类应用于它包含的元素，但它不起作用。有没有办法可以避免手动将类应用于每个元素？谢谢。

<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使用 :nth-child(数字)、:first-child 或 :last-child。

啊，对于你的 CSS，使用：

.navbar li 而不是使用 li.navbar 因为如果您定义要自定义的 div，则无需指定要自定义的 li。

希望对你有帮助

问候。