如何使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中，因此您的{{ 1}}。

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

为避免这种情况，您将需要更新javascript结构以使您的html更精确。例如：您生成的列表将封装在css标记中，该列表用于“管理测验”（如果我正确理解您的话）。因此，您可以像ul一样向此id添加一个ul。现在，您将只能为<ul id="quizzManager">的孩子，他们是ID为css的{​​{1}}的孩子，就像这样：

li

在这种情况下，不在ul中的所有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; } 的影响。