3

これが私の HTML と CSSの例です。最初の 3 つのボタンだけでなく、すべてのボタンに 2 番目のルールが適用される理由を、私の人生では理解できません。

HTML

<div id="test">
<ul>
<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>
<li><button>4</button></li>
<li><button>5</button></li>
<li><button>6</button></li>
    </ul>
</div>

CSS

#test button
{
    background-color: blue;
}

#test button:nth-child(-n + 3) 
{
    background-color: red;
}

#test button:hover {
    background-color: green;
}
4

1 に答える 1

5

nth-child間違った要素に適用しています。それぞれの子は1つだけbuttonです。liあなたは要素 をターゲットにすることを意味します：

#test ul li:nth-child(-n + 3) button
{
    background-color: red;
}

http://jsfiddle.net/fCFEn/3/

于 2012-09-03T19:10:26.017 に答える