如何使CSS仅影响.js而不影响我的.html的列表项目

Question

我目前正在使用Visual Studio Code开发Web应用程序，并且我有3个文件index.html，styles.css和app.js当前在我的html中，我正在基于ul和li

创建导航栏

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

我的问题是，在我的CSS中，这种样式仅适用于我的app.js，同时也出现在我的index.html li项目中。我了解为什么会这样，但是我不确定如何解决此问题。

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导航条代码

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

Answer 1

[css始终应用于html，您只能设计或更改html标签的颜色。

您的javascript文件将在您的情况下生成一个列表li，但这仅意味着他将被添加到当前的html中，因此您的css可能会对其进行更改。

确实是这种情况，因为您用li {}规定了一条规则，这意味着页面上的所有li都会受到影响，即使javascript生成的也受到影响。

为避免这种情况，您将需要更新html结构以使css更精确。例如，如果您的导航栏位于<nav>标记中（我希望是这种情况），则可以像这样影响li中的nav：

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

在这种情况下，不在li中的所有nav将不受此css的影响。