Javascript 如何使css仅影响.js中的列表项而不影响.html中的列表项

我目前正在使用VisualStudio代码开发一个web应用程序，我有3个文件 index.html、styles.css和app.js 目前在我的html中，我正在基于ul和li创建一个导航栏

而在我的app.js中，我也使用ulli创建一个列表来显示从数据库中提取的值

我的问题是，在我的css中，这个样式仅适用于我的app.js，也出现在我的index.htmlli项目中。我理解为什么会发生这种情况，但我不确定如何解决这个问题

li{
padding: 20px;
background: #f6f6f6;
font-size: 20px;
color: rgb(0, 0, 0);
position: relative;
border-bottom: 1px solid #e6e6e6;
height: 80px;
}

如图所示，此li css影响导航栏内部的li，以及主体上显示的列表中的li

非常感谢您的帮助，谢谢

这是我的html导航条形码

物理导师门户

css

始终应用于

html

，您只能设计或更改html标记的颜色

您的

javascript

文件将在您的情况下生成一个列表

li

，但这只意味着他将被添加到当前的

html

，因此它可能会被您的

css

更改

确实如此，因为您使用

li{}

规定了一条规则，这意味着您页面上的所有

li

都将受到影响，即使是由

javascript

生成的

为了避免这种情况，您需要更新

html

结构，使

css

更精确。例如：您生成的列表将封装在

ul

标记中，列表用于“管理测验”（如果我理解正确的话）。因此，您可以简单地将

id

添加到此

ul

中，如

。您现在将能够使用id

quizzManager

仅为

li

编写

css

，他们是

ul

的孩子，如下所示：

ul#测验李经理{
填充：20px；
背景：#f6f6f6；
字体大小：20px；
颜色：rgb（0,0,0）；
位置：相对位置；
边框底部：1px实心#e6；
高度：80px；
}

---

在这种情况下，所有不在

ul#quizzManager

中的

li

将不受此

css

的影响。为导航栏中的项目分配一个类（ul，li，a）。非常好的解释，完全理解。上面的li代码是针对javascript文件而不是html的，那么我应该如何编辑它呢？谢谢@johannchopin的帮助。它的工作和伟大的解释，非常感谢@基本没问题；）如果可能的话，你能帮我看看我的另一个问题吗？它与我的app.js代码中的一些函数有关

    <header>
        <img class = "logo" src="images/logo.jpg" height = "50">
        <h1 style="color:rgb(0, 0, 0);font-size:30px">Physics Tutor Portal</h1>
        <nav>
            <ul class = "nav_links">

                <li><a href="#"><button>Unknown Questions</button></a></li>
                <li><a href="#"><button>Manage Quiz</button></a></li class = "test">
                <li><a href="#"><button>Quiz Statistics</button></a></li class = "test">
                <li><a href="#"><button>Feedbacks</button></a></li class = "test">
            </ul>
        </nav>
    </header>