Question

我遇到元素article的背景问题。我使用:nth-child(n)，但它们在我的localhost上无法正常工作。当我将同一代码放到jsfiddle时，一切正常。

我当地的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>:: Nove pokusy s Yablkem ::</title>
    <link rel="stylesheet" href="/ath/css/normalize.css">
    <link rel="stylesheet" href="/css/yablko.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <article>Jsem ve středě?</article>
    <article>Všichni co se moc ptají se nic nedozví...</article>
    <article>Marmelada</article>
    <article>Sýrové kuličky || Menu</article>
  </body>
</html>

CSS（yablko.css）

html, body {
  height: 100%;
}
body {
  padding: 1em;
  margin: 0;
  background: orange;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: baseline;

  justify-content: center;
  flex-direction: row;
}

article {
  padding: 1.2em;
  background: #336dd1;
  border-radius: .8em;
  margin: 5px;
}
article:nth-child(1) { background: #888; }
article:nth-child(2) { background: #ccd; }
article:nth-child(3) { background: #333; font-size: 10px; }
article:nth-child(4) { background: #aaa; font-size: 30px; }

来自本地的图片（结果不佳）： enter image description here 来自jsfiddle的图片（确定结果）：

我可以寻求帮助吗？感谢

Flexbox并不适用于n-child（n）

0 个答案: