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

Question

我正在尝试设置无序列表的样式，但我似乎无法引用 CSS 中的项目。我已经尝试引用 class 名称，并通过执行 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 代码示例吗？ Link 它在 html;

的头部部分带有以下内容

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

您可以 select 他们使用以下内容；

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

然后是下面的；

.nav-item {
  color: blue;
}

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

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

Having trouble referencing elements in my styling sheet

html

css

model-view-controller

user-interface