仅将 CSS 样式添加到一个 HTML 元素

Question

我刚刚开始学习网络开发，遇到了一些问题。在我当前创建的网站中，我有一个导航菜单。但是，我在网页的主要内容中还有其他 ul 和 li 元素。我一直在尝试将某些样式仅应用于我的导航栏，而不应用于我的内容中的项目符号列表，但无论我尝试什么，我要么在导航和内容上都获得样式，要么没有。我查看了谷歌和很多不同的网站，我尝试在我的样式前面添加 .navigation 和 # 但似乎没有任何效果。我一定是在某个地方做错了什么，但我不知道可能是什么。如果有人能提供帮助那就太好了！以下是我的导航条码：

<div id=navbar">
    <ul>
        <li>
            <a href="Home Page.html">Home</a>
        </li>
        <li>
            <a href="About Volleyball.html">About Volleyball</a>
        </li>
        <li>
            <a href="Sign-Up.html">Sign-Up</a>
        </li>
        <li>
            <a href="Announcements.html">Announcements</a>
        </li>
        <li>
            <a href="Contact Us.html">Contact Us</a>
        </li>
        <li>
            <a href="Links.html">Links</a>
        </li>
    </ul>
</div>

这些是我单独的 css 样式表上的样式，我希望将其应用于上面的代码：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #4da6ff;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 75px;
    text-decoration: none;
}

li a:hover {
    background-color: #80bfff;
}

Answer 1

您可以简单地选择导航栏的子元素，方法是在选择器前面添加

#navbar

，它会选择 id 为

navbar

的元素，之后的选择器将仅在其子元素中搜索：

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #4da6ff;
}

#navbar li {
  float: left;
}

#navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 75px;
  text-decoration: none;
}

#navbar li a:hover {
  background-color: #80bfff;
}

<div id="navbar">
  <ul>
    <li><a href="Home Page.html">Home</a></li>
    <li><a href="About Volleyball.html">About Volleyball</a></li>
    <li><a href="Sign-Up.html">Sign-Up</a></li>
    <li><a href="Announcements.html">Announcements</a></li>
    <li><a href="Contact Us.html">Contact Us</a></li>
    <li><a href="Links.html">Links</a></li>
  </ul>
</div>
<ul>
  <li>No styles applied</li>
  <li>No styles applied</li>
</ul>

Answer 2

在 .css 文件中，您可以创建跨元素使用的类。

在 .css 文件中尝试此操作。

.hello {
    color: blue;
    text-align: center;
}

然后在你的 html 中尝试这个

<h1 class="hello">Hello World</h1>

这会将 .css 文件中定义的样式应用到类为“hello”的元素。

有关课程的更多信息可以在这里找到：https://www.w3schools.com/cssref/sel_class.asp

Answer 3

如果您想向任何特定元素添加样式，则可以向该特定元素添加 CSS 代码，例如：对于标签，您可以使用

p{color:red}

或使用 class: p.my-element{color:red} 或使用 ID： p#{红色}

您正处于学习发展的初始阶段。因此，阅读并编写自己的代码。

Answer 4

查看 id 的 和 classes。

这将允许您单独设置元素的样式。

Answer 5

查找内联样式。例如

<tag style='property:value' />