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

如果要为任何特定元素添加样式，则可以将CSS代码添加到该特定元素，例如：对于标记，您可以使用p{color:red}或使用类：p.my-element {color：red}或使用ID：p＃{color red}

您正处于学习发展的初始阶段。所以读写自己的代码。

Answer 2

您可以通过在选择器前加上#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 3

查看id's和classes。

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

Answer 4

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

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

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

然后在你的html中试试这个

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

这会将.css文件中定义的样式应用于具有类＆＃34; hello＆＃34;的元素。

有关课程的更多信息，请访问：https://www.w3schools.com/cssref/sel_class.asp

将CSS样式添加到Just One HTML元素

4 个答案: