CSS样式代码未显示在我的内容类中

时间：2018-10-16 16:15:29

标签： html css 

.post-container:nth-child(even) {
  background-color: #f2f2f2;
}
<!DOCTYPE html>
<html>

<head>
  <title> My Blog </title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div id="header">
    <div class="container">
      <a id="header-title" href="index.html">My Blog</a>
      <ul id="header-nav">
        <li><a href="about.html">About Me</a></li>
        <li><a href="mailto:a@yahoo.com">Email Me</a></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <div class="post-container">
      <div class="post">
        <div class="post-author">
          <img src="aj1.jpg">
          <span>Me</span>
        </div>
        <p class="post-date">Today</p>
        <h3 class="post-title"><em><strong>First Decent Looking Webpage</strong></em></h3>
        <div class="post-content">
          <p>This is all a test to see if everything is coming out ok.</p>
          <p>Just more random text to see how it all turns out</p>
          <p>Click <a href="https://www.youtube.com">here</a> for my favorite website!</p>
        </div>
      </div>
    </div>
  </div>
  <div id="content">
    <div class="post-container">
      <div class="post">
        <div class="post-author">
          <img src="jim.jpg">
          <span>Jim</span>
        </div>
        <p class="post-date">Today</p>
        <h3 class="post-title"><em><strong>Trying to beat the Gold Challenge</strong></em></h3>
        <div class="post-content">
          <p>I think I <em>nailed</em> the gold challenge for this test.</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

我使用Mimo编写了CSS，HTML教程，在尝试完成其中一项黄金挑战之后，我遇到了一个问题。我遵循了开球的步骤，但无法正常工作。两篇博客文章之间应该有颜色差异，这种颜色将分隔网站上的文章。

2 个答案:

答案 0 :(得分：0)

不是使用与ID相同的名称，而是将一个类添加到这些div中，并使用该类作为获取nth-child的引用

.post:nth-child(even) .post-container {
  background-color: #f2f2f2;
}
<!DOCTYPE html>
<html>

<head>
  <title> My Blog </title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div id="header">
    <div class="container">
      <a id="header-title" href="index.html">My Blog</a>
      <ul id="header-nav">
        <li><a href="about.html">About Me</a></li>
        <li><a href="mailto:a@yahoo.com">Email Me</a></li>
      </ul>
    </div>
  </div>
  <div id="content" class="post">
    <div class="post-container">
      <div class="post">
        <div class="post-author">
          <img src="aj1.jpg">
          <span>Me</span>
        </div>
        <p class="post-date">Today</p>
        <h3 class="post-title"><em><strong>First Decent Looking Webpage</strong></em></h3>
        <div class="post-content">
          <p>This is all a test to see if everything is coming out ok.</p>
          <p>Just more random text to see how it all turns out</p>
          <p>Click <a href="https://www.youtube.com">here</a> for my favorite website!</p>
        </div>
      </div>
    </div>
  </div>
  <div id="content" class="post">
    <div class="post-container">
      <div class="post">
        <div class="post-author">
          <img src="jim.jpg">
          <span>Jim</span>
        </div>
        <p class="post-date">Today</p>
        <h3 class="post-title"><em><strong>Trying to beat the Gold Challenge</strong></em></h3>
        <div class="post-content">
          <p>I think I <em>nailed</em> the gold challenge for this test.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="container">
      <div class="column">
        <h4>My Links</h4>
        <p>
          <a href="">Facebook</a><br>
          <a href="">Instagram</a>
        </p>
      </div>
      <div class="column">
        <h4>My Story</h4>
        <p>Hi There! I am an aspiring web developer.</p>
      </div>
    </div>
  </div>
</body>

</html>

答案 1 :(得分：0)

nth-child选择器选择一个公共父级的子级。由于您的两个post-container div不是兄弟姐妹，因此nth-child计数器永远不会达到2（第一个偶数）。最简单的解决方案是定位#content div，因为它们是同级，但是您的标记存在问题，因为您可以重用content id（id s必须是唯一的！）。我已将div更改为具有content而不是id的 class ，并相应地修改了CSS。现在，根据需要，第二个帖子的背景为灰色：

.content:nth-child(even) {
  background-color: #f2f2f2;
}
<!DOCTYPE html>
<html>

<head>
  <title> My Blog </title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div id="header">
    <div class="container">
      <a id="header-title" href="index.html">My Blog</a>
      <ul id="header-nav">
        <li><a href="about.html">About Me</a></li>
        <li><a href="mailto:a@yahoo.com">Email Me</a></li>
      </ul>
    </div>
  </div>
  <div class="content">
    <div class="post-container">
      <div class="post">
        <div class="post-author">
          <img src="aj1.jpg">
          <span>Me</span>
        </div>
        <p class="post-date">Today</p>
        <h3 class="post-title"><em><strong>First Decent Looking Webpage</strong></em></h3>
        <div class="post-content">
          <p>This is all a test to see if everything is coming out ok.</p>
          <p>Just more random text to see how it all turns out</p>
          <p>Click <a href="https://www.youtube.com">here</a> for my favorite website!</p>
        </div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="post-container">
      <div class="post">
        <div class="post-author">
          <img src="jim.jpg">
          <span>Jim</span>
        </div>
        <p class="post-date">Today</p>
        <h3 class="post-title"><em><strong>Trying to beat the Gold Challenge</strong></em></h3>
        <div class="post-content">
          <p>I think I <em>nailed</em> the gold challenge for this test.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="container">
      <div class="column">
        <h4>My Links</h4>
        <p>
          <a href="">Facebook</a><br>
          <a href="">Instagram</a>
        </p>
      </div>
      <div class="column">
        <h4>My Story</h4>
        <p>Hi There! I am an aspiring web developer.</p>
      </div>
    </div>
  </div>
</body>

</html>

相关问题
最新问题