css - :最初の子セレクターまたは等価物

Question

UL の最初のリスト項目のスタイルを設定したいのですが、リスト項目は<a>タグで囲まれています。

http://jsfiddle.net/PHhFX/だけで簡単だと思っていましたが、うまくいきません。

誰でも手がかりはありますか？

Answer 1

<li>aを an で囲むことは想定されていません<a>— HTML では、<li>要素を の子としてのみ持つことができます<ul>。

あなたはおそらく逆の方法で（<a>内で<li>）それを行うつもりだったので、

ul li:first-child

jsFiddle プレビュー

Answer 2

さあ、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 3

HTML5仕様liでは、要素が次の要素に含まれている可能性があることを詳しく説明しています。

• ol
• ul
• menu

あなたはそれaがそれらの中にないことに気付くでしょう。

Answer 4

次のように動作するはずです: 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>a の後に aが来ることを覚えておいてください<li>

それが役に立てば幸い！</p>

Answer 5

<ul>リンクタグはリスト（または）の有効な子ではありません<ol>。参照：LI以外のものは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