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>
p:not(:first-child):hover {background-color: red;}
<p>first</p> <p>second</p> <p>third</p>
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>
或者,您可以使用:
#OfficeUI .iconHolder img:nth-child(n + 2):hover
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.