css - :first-child 选择器或等价物

Question

我想为 UL 的第一个列表项设置样式，该列表项包含在<a>标签中。

我原以为这很简单，就是这样：http: //jsfiddle.net/PHhFX/但这不起作用。

任何人有任何线索？

Answer 1

您不应该将 a 包含<li>在一个<a>- 在您的 HTML 中，您只能将您的<li>元素作为<ul>.

您可能打算以另一种方式（<a>在<li>）内进行操作，然后选择

ul li:first-child

jsFiddle 预览

Answer 2

它应该像这样工作：http: //jsfiddle.net/PHhFX/11/

CSS标记：

ul li:first-child {
    border: 1px solid #000;
} 

HTML标记：

<ul>
    <li><a href="a">AAA</a></li>
    <li><a href="b">BBB</a></li>
    <li><a href="c">CCC</a></li>
</ul>

ps：<li>你不应该用元素包装<a>元素。记住，一个之后<ul>是一个<li>

希望能帮助到你！​</p>

Answer 3

给你，修复你的 html 和 css：

html:

<ul>
    <li><a href="a">AAA</a></li>
    <li><a href="b">AAA</a></li>
    <li><a href="c">AAA</a></li>
</ul>​

和CSS：

ul li:first-child {
  border: 1px solid #000;
}    ​

这是jsFiddle中的实时示例

Answer 4

HTML5 规范详细说明了该li元素可能包含在以下元素中：

• ol
• ul
• menu

你会注意到那a不在其中。

Answer 5

链接标签不是列表 (<ul>或<ol>) 的有效子代，请参阅：UL 中是否允许除 LI 之外的任何内容？

您必须在列表项中有链接：

<li><a href="a">AAA</a></li>

所以：

ul li:first-child a{
  border: 1px solid #000;
}   

见：http: //jsfiddle.net/PHhFX/17/

Answer 6