Question

我有各种各样的元素，当我将它们悬停时，我希望所有这些元素都有一个背景，除了第一个孩子。

这是我的CSS选择器：

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

这有什么问题？

相关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

您可以使用nth-child选择器。 n+2使其选择除第一个元素之外的所有元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

或者，您可以使用：

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

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

3 个答案: