如何使CSS仅影响.js而不影响我的.html的列表项 [英] How do I make css affect list item in .js only and not in my .html

问题描述

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

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

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

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

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

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

如图所示，该li css正在影响导航栏内部的li，并且列表中显示的li会显示在主体上

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

非常感谢您的帮助.

这是我的html导航栏代码

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>

推荐答案

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

css is always applied to html, you can only design or change the color of a html tag.

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

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.

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

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

为避免这种情况，您将需要更新您的html结构以使您的css更精确.例如:您生成的列表将封装在ul标记中，该列表用于管理测验"(如果我正确理解您的话).因此，您可以像<ul id="quizzManager">一样向该ul添加一个id.现在，您将只能为ID为quizzManager的ul子代的li编写css，就像这样:

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

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

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

这篇关于如何使CSS仅影响.js而不影响我的.html的列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！