在我的样式表中引用元素时遇到问题

Question

我正在尝试设置我的无序列表的样式，但我似乎无法引用我的 CSS 中的项目。我尝试过引用类名，并通过执行 ul li i、#divname 等来引用元素。现在我只是直接在 HTML 页面中设置列表的样式，但它看起来很糟糕。

我似乎无法在我的 CSS 中引用这些 html 元素 - 如何在我的 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>

Answer 1

您有 CSS 代码的示例吗？在 html 的 head 部分将其与以下内容链接；

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