如何让 css 仅影响 .js 中的列表项，而不影响我的 .html 中的列表项

Question

I am currently using Visual Studio Code to develop a web application and I have 3 files index.html, styles.css and app.js Currently in my html, I am creating a navbar based on ul and li

whereas in my app.js, I am also using ul li to create a list to show values pulled from my database.

My issue is, in my css, this styles meant for my app.js only, is appearing for my index.html li items as well. I understand why it is happening, but I am unsure of how to fix this.

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

As shown, this li css is affecting the li inside of the navbar, and the li in the list displayed on the body

Would appreciate any help, thanks.

Here is my html navbar codes

    <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 is always applied to html , you can only design or change the color of a html tag.

Your javascript file will generate a list li in your case but that just means that he's gonna be added to the current html so it's potentially going to be altered by your css .

And this is indeed the case because you stipulate a rule with li {} which means that all the li on your page will be affected, even the ones generated by javascript .

To avoid this you will need to update your html structure to make your css more precise. For example: your generated list will be encapsulated in a ul tag, the list is here to 'manage the quizz' (if I understood you correctly). So you can simply add an id to this ul like <ul id="quizzManager"> . You will be able able now to write css only for li who are children from a ul with the id quizzManager just like that:

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

In this case, all li that are not in a ul#quizzManager will not be affected by this css .