Как заставить css влиять на элемент списка в. js только, а не в моем. html

Question

В настоящее время я использую код Visual Studio для разработки веб-приложения, и у меня есть 3 файла индекса. html, стили. css и приложение. js В настоящее время в моем html я создаю навигационную панель на основе на ul и li

, тогда как в моем приложении. js я также использую ul li для создания списка для отображения значений, извлеченных из моей базы данных.

My Проблема в том, что в моем css этот стиль предназначен для моего приложения. js, только для моего индекса. 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 более точной , Например: ваш сгенерированный список будет заключен в тег ul, список здесь для того, чтобы «управлять тестом» (если я вас правильно понял). Таким образом, вы можете просто добавить id к этому ul как <ul id="quizzManager">. Теперь вы сможете писать css только для 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;
}

В этом случае все li которые не в ul#quizzManager не будут затронуты этим css.