Question

我是html和css的新手所以我正在通过制作一个示例网站来学习和练习，但我遇到了一个问题，我似乎无法使用div id标签来编辑css，css是完美地编辑任何不是div标签的东西。我不确定我的代码有什么问题。

这是我正在使用的HTML代码：

<body>

    <div id="nav">
      <div id="container">
        <ul>
          <li>About us</li>
          <li>Getting Involved</li>
        </ul>

        <div id="centernav">
          <ul>
            <li>Website</li>
          </ul>
        </div>

        <ul>
          <li>Showtimes</li>
          <li>Announcements</li>
        </ul>
      </div>
    </div>

    <div id="website-name">
        <h1>Website title</h1>
        <p>info</p>
    </div>
</body>

我的css代码：

div.nav {
  font-size: 20px;
  background-color: black;
}

h1 { 
  color: white;
  font-size: 30px;
}  

body {
  background-color: blue;
}

Answer 1

试试这个：

div#nav {
  font-size: 20px;
  background-color: black;
}

h1 { 
  color: white;
  font-size: 30px;
}  

body {
  background-color: blue;
}

Answer 2

.表示一个类，#表示一个id。将div.nav更改为div#nav。

Answer 3

您一直使用错误的选择器，div.nav选择所有<div class="nav">，而div#nav选择<div id="nav">，但由于ID是唯一的，可以使用#nav：）

有关可移植性的信息，请参阅here，或在此代码段中

＆＃13;

#nav {
  font-size: 20px;
  background-color: black;
}

h1 { 
  color: white;
  font-size: 30px;
}  

body {
  background-color: blue;
}

＆＃13;

<body>

    <div id="nav">
      <div id="container">
        <ul>
          <li>About us</li>
          <li>Getting Involved</li>
        </ul>

        <div id="centernav">
          <ul>
            <li>Website</li>
          </ul>
        </div>

        <ul>
          <li>Showtimes</li>
          <li>Announcements</li>
        </ul>
      </div>
    </div>

    <div id="website-name">
        <h1>Website title</h1>
        <p>info</p>
    </div>
</body>

＆＃13;

也许这很有用，css selectors。

希望它有所帮助！

为什么我的css没有更改div标签中的项目

3 个答案: