在navbar中为每个父li添加每个类

在Web开发中，导航栏（Navbar）是一种常见的用户界面组件，用于展示网站的主要导航链接。使用<ul>和<li>标签可以很容易地创建一个导航栏。如果你想在每个父级<li>元素上添加一个类，可以使用HTML和CSS来实现。

基础概念

HTML: 超文本标记语言，用于创建网页的结构。
CSS: 层叠样式表，用于描述网页的外观和格式。
类（Class）: 在CSS中，类是一种选择器，用于选择特定的HTML元素并应用样式。

类型

父级类: 应用于父级<li>元素的类。
子级类: 应用于子级<li>元素的类。

应用场景

导航栏样式: 为不同的导航项添加不同的样式。
响应式设计: 根据屏幕大小调整导航栏的布局。

示例代码

以下是一个简单的示例，展示如何在每个父级<li>元素上添加一个类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Example</title>
    <style>
        .nav-item {
            display: inline-block;
            padding: 10px;
            background-color: #f1f1f1;
            margin-right: 5px;
        }
        .nav-item:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li class="nav-item"><a href="#">Home</a></li>
            <li class="nav-item"><a href="#">About</a></li>
            <li class="nav-item"><a href="#">Services</a></li>
            <li class="nav-item"><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>