将鼠标悬停在除第一个元素之外的所有元素上

Question

I have various elements and when I hover them, I want all of them to have a background with the exception of the first child.

Here's my CSS selector:

#OfficeUI .iconHolder img:hover:not(:first-child) { background-color: #CDE6F7; }

What's wrong with this?

Relevant HTML

        <div class="officeui-position-absolute iconHolder">
            <!-- Provides the images on the top left of the ribbon. -->
            <top-Images-Container>
                <span ng-repeat="icon in icons">
                    <img src="{{icon.Icon}}" />
                </span>
            </top-Images-Container>    
        </div>

Answer 1

 p:not(:first-child):hover {background-color: red;} 

 <p>first</p> <p>second</p> <p>third</p> 

Answer 2

You can use the nth-child selector. n+2 makes it select all but the 1st element.

 li:nth-child(n+2):hover { color:red; } 

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 

Answer 3

或者，您可以使用：

    #OfficeUI .iconHolder img:nth-child(n + 2):hover