为什么导航侧栏中的列表元素没有被设置样式?

时间:2017-11-11 20:32:40

标签: html css

我试图创建一个基本的侧边栏,这是我第一次尝试它:



body {
font-family: courier;
font-size: 18px;
    }

h1, h2, h3, h4 {
text-decoration: underline;
}

.content {
    margin-left: 200px;
}
.side {
    position: fixed;
    height: 100%;
    border: 5px solid black;
    top: 0;
    left: 0;
    background: grey;
    width: 180px;
    padding: 10px;

#nav {
  list-style-type: square;
}

<!DOCTYPE HTML>

<html>

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css" />
    <title>Test Page For Fixed Sidebar</title>
  </head>

  <body>

    <div class="content">
      <h1>Information</h1>
      <p> To your left is a sidebar containing links </p>
      <div class="side">
          <ul id="nav">
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
          </ul>
      </div>
    </div>

  </body>

</html>
&#13;
&#13;
&#13;

我似乎在设置导航侧边栏的样式时遇到问题,即元素ul id=nav。我试图将列表的项目符号更改为正方形,甚至尝试将它们完全删除,但对相应样式表的任何更改都不会反映在页面上。我可以设置其他元素的样式,它似乎就是这个导致我出问题的元素。

任何帮助都将不胜感激,谢谢。

1 个答案:

答案 0 :(得分:1)

您无法使用类或ID定位列表项,您必须在导航栏中定位目标。这是通过这样做完成的

/* targeting the #nav and then looking for li tags withing it */
#nav > li