0

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

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

任何人有任何线索？

4

6 回答 6

8

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

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

ul li:first-child

jsFiddle 预览

于 2012-07-25T15:04:39.660 回答
1

它应该像这样工作：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>

于 2012-07-25T15:05:42.717 回答
1

给你，修复你的 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中的实时示例

于 2012-07-25T15:07:56.460 回答
1

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

  • ol
  • ul
  • menu

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

于 2012-07-25T15:08:10.910 回答
0

链接标签不是列表 (<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/

于 2012-07-25T15:08:34.653 回答
0
于 2012-07-25T15:09:04.910 回答