Возникли проблемы со ссылками на элементы в моей таблице стилей

#html #css #user-interface #model-view-controller

#HTML #css #пользовательский интерфейс #model-view-controller

Вопрос:

Я пытаюсь создать свой неупорядоченный список, но, похоже, я не могу ссылаться на элементы в моем CSS. Я пытался ссылаться на имя класса и ссылаться на элемент, выполняя ul li i, используя #divname и т. Д. Сейчас я просто создаю список непосредственно на странице HTML, но это выглядит ужасно.

Кажется, я не могу ссылаться на эти HTML-элементы в моем CSS — как я могу правильно ссылаться на эти элементы в моем CSS? что еще более важно, я хотел бы понять, как узнать, что записывать в моих таблицах стилей, чтобы я мог понять концепцию.

Вот мой html:

   <div class="navbar-container">
                    <ul class="navbar-items" style="display: block; margin-left: auto; margin-right: 57%; margin-top: 11px;">
                        <li class="nav-item">
                            <a class="nav-link text-dark" style="text-decoration:none; color: #333333;" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" style="text-decoration:none; color: #333333;" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" style="text-decoration:none; color: #333333;" asp-area="" asp-controller="Course" asp-action="Index">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" style="text-decoration:none; color: #333333;" asp-area="" asp-controller="Professor" asp-action="Index">Professors</a>
                        </li>
                    </ul>
        </div>

Ответ №1:

У вас есть пример вашего CSS-кода? Свяжите его со следующим в разделе head html;

 <link rel="stylesheet" href="#">

Вы можете выбрать их с помощью следующего;

 .navbar-container {} 
ul {}
.navbar-items {} 
.nav-items {}
li {}
.nav-link {}
.text-dark {}

Затем выполняется следующее;

 .nav-item {
  color: blue;
}

.nav-item:hover {
  color: red;
}

1. Я не добавлял свой CSS, потому что он буквально ничего не делает, поскольку я не могу получить доступ ни к одному из элементов. Когда я пытаюсь стилизовать свои ссылки с помощью .nav-link:hover, я не могу изменить цвет наведения, несмотря на то, что мой код меняет цвет. Он не отображается в браузере. другие элементы, такие как работа с телом, но я не могу получить доступ к тем, которые для UL

2. Это потому, что ваши встроенные стили HTML имеют приоритет. Создайте таблицу стилей и удалите встроенные стили, затем используйте следующее;