为 CSS 类中的各种元素设置属性答案

【问题标题】：Setting attributes for various elements in a CSS class为 CSS 类中的各种元素设置属性
【发布时间】：2018-05-09 21:03:22
【问题描述】：

这是唯一的方法吗？我尝试使用导航栏类创建一个 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>

adding a screenshot of my CSS

谢谢

【问题讨论】：

您应该使用后代或子选择器。您不需要在每个元素上都使用该类。
请避免将代码发布为图像，只需复制粘贴，然后突出显示并使用CTRL+K。

标签： css class styles

【解决方案1】：

如果您想要最简单的方法来添加类而不手动添加，则可以使用 jquery，否则，对于 css 部分，如果您希望 li 具有特定样式使用 :nth-child(数字)、:first-child 或 :last-child。

啊，对于你的 CSS，使用：

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

希望对你有帮助，

您好。

【讨论】：

【解决方案2】：

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 {
        }

【讨论】：