如何使 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是影响navbar里面的li，以及body上显示的list里面的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 更精确。例如：您生成的列表将被封装在ul 标记中，该列表用于“管理测验”（如果我理解正确的话）。因此，您可以简单地将id 添加到此ul，例如<ul id="quizzManager">。现在，您将能够为 li 写 css，他们是来自 ul 且 ID 为 quizzManager 的孩子，就像这样：

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

在这种情况下，所有不在ul#quizzManager 中的li 都不会受到这个css 的影响。