使用一个简单的列表项 <li> 我做错了什么。背景颜色不显示

Question

li 没有任何特殊的容器 ID，背景颜色也没有显示。我怎么搞砸了？这是一个元素。

HTML,

<section id="page-container">
<ul>
<li><h3>some title</h3>item one</li>
<li><h3>title</h3>several like this</li>

</ul>
</section>

CSS,

#page-container > li:nth-child(2n+1) {
    background-color: #7ABFEB;
    padding: 10px;
}

感谢任何其他提示！

谢谢。

Answer 1

您的选择器不起作用的原因是 li 元素不是 #page-container 元素的直接子元素。

要么删除 child combinator, >，要么您可以将其更改为包含 ul 元素：

#page-container > ul > li:nth-child(2n+1) {}

Example

也许文档会澄清一些事情：

8.2. Child combinators

div ol > li p

The above selector represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div.

Answer 2

您正在寻找 #page-container 的直系子代，只需删除 >

#page-container li:nth-child(2n+1) {
   background-color: #7ABFEB;
   padding: 10px;
}

FIDDLE

Answer 3

这是因为你在为 #page-container 的直接子元素设置样式，这是错误的，因为 li 元素不属于 #page-container，它属于 ul 内部

修复：

演示： http://jsfiddle.net/skL4gjdw/

#page-container ul li:nth-child(2n+1) {
    background-color: #7ABFEB;
    padding: 10px;
}

Answer 4

这会起作用。

#page-container ul li:nth-child(2n+1) {
      background-color: #7ABFEB;
      padding: 10px;
}

使用一个简单的列表项 <li> 我做错了什么。背景颜色不显示

using a simple list item <li> what am I doing wrong. background color doesnt show up

html

css

css-selectors