0

私は次のコードを持っています：

div:nth-child(1) {
    background-color: red;  
}
<h1>Boxes</h1>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

div内容のあるが選択されることを期待してい1stますが、そうではありません。ただし、h1要素を削除すると、期待どおりに機能します。なんで？

4

1 に答える 1

5

あなたが抱えている問題はセレクター自体です：:nth-child(); これにより、アタッチされている要素が検索されますdiv。これは、その親のn番目の子です。

選択するとき：

div:nth-child(1) {
 /*...*/
}

これは何にも一致しません。h1要素は:nth-child(1)共有親の最初の子/であるため。

適応するには、次のいずれかを使用する必要があります。

div:nth-child(2) {
    background-color: red;  
}

JSフィドルデモ。

divまたは、要素を囲む新しい親を作成します。

<h1>Boxes</h1>
<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

JSフィドルデモ。

ブラウザのサポートでは、次を使用することもできます:nth-of-type(1)。

div:nth-of-type(1) {
    background-color: red;  
}​

JSフィドルデモ。

参照：

于 2012-10-14T17:51:02.153 に答える