：第一个孩子选择器或等效物

Question

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

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

任何人都有任何线索？

Answer 1

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

您可能想要反过来（<a>内<li>），然后选择

ul li:first-child

jsFiddle preview

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>

p.s。：您不应该使用<li>元素包装<a>个元素。请记住，在<ul>到达<li>

之后

希望它有所帮助！

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

The HTML5 spec详细说明li元素可能包含在以下元素中：

• ol
• ul
• menu

您会注意到a不在其中。

Answer 5

链接标记不是列表的有效子项（<ul>或<ol>），请参阅：Is anything except LI's allowed in a UL?

您必须在list-items中包含链接：

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

所以：

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

请参阅：http://jsfiddle.net/PHhFX/17/

Answer 6

使用ul a:first-child>li代替ul a:first-child ​，但这是一个黑客攻击。 边界不是继承的财产。