CSS3学习笔记 之 否定伪类选择器
2014-09-01 00:02
567 查看
否定选择器:not()主要用来选中不匹配该选择器的元素,其语法如下:
浏览器兼容性:所有版本的FF, Chrome,Safari,Opera,和IE9+都支持否定伪类选择器
下面通过一个例子来演示否定伪类选择器的使用:当鼠标悬浮在整个图片墙上时,所有图片通过自定义的过滤特性,变成黑白模糊的效果,当鼠标移到一张图片上去时,图片恢复到默认效果,而其它图片保持黑白模糊效果:
显示效果如下:
参考资料:
1.
《图解CSS3:核心技术与案例实战》
2. http://www.w3.org/TR/css3-selectors/#negation
选择器 | 功能描述 |
E:not(F) | 匹配所有除元素F外的E元素 |
下面通过一个例子来演示否定伪类选择器的使用:当鼠标悬浮在整个图片墙上时,所有图片通过自定义的过滤特性,变成黑白模糊的效果,当鼠标移到一张图片上去时,图片恢复到默认效果,而其它图片保持黑白模糊效果:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>CSS Filter Effects In Action</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul { width: 690px; margin: 20px auto; letter-spacing: -4px; word-spacing: -4px; font-size: 0; } li { font-size: 16px; letter-spacing: normal; word-spacing: normal; display:inline-block; *display: inline; zoom:1; list-style: none outside none; margin: 5px; } img { width: 128px; height: 128px; } .gallery li:nth-child(2){ -webkit-filter:grayscale(1); } .gallery li:nth-child(3){ -webkit-filter:sepia(1); } .gallery li:nth-child(4){ -webkit-filter:saturate(0.5); } .gallery li:nth-child(5){ -webkit-filter:hue-rotate(90deg); } .gallery li:nth-child(6){ -webkit-filter:invert(1); } .gallery li:nth-child(7){ -webkit-filter:opacity(0.2); } .gallery li:nth-child(8){ -webkit-filter:blur(3px); } .gallery li:nth-child(9){ -webkit-filter:drop-shadow(5px 5px 5px #ccc); } .gallery li:nth-child(10){ -webkit-filter: saturate(6) hue-rotate(361deg) brightness(.09); } .gallery:hover li:not(:hover){ -webkit-filter: blur(2px) grayscale(1); opacity: .7; } </style> </head> <body> <ul class="gallery"> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> <li> <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> </li> </ul> </body> </html>
显示效果如下:
参考资料:
1.
《图解CSS3:核心技术与案例实战》
2. http://www.w3.org/TR/css3-selectors/#negation
相关文章推荐
- CSS3学习笔记 之 UI元素状态伪类选择器
- CSS3学习笔记 之 目标伪类选择器
- CSS3学习笔记 之 语言伪类选择器
- CSS3学习笔记1:结构性伪类选择器
- CSS3学习笔记 之 结构伪类选择器
- CSS3学习笔记2:UI元素状态伪类选择器
- CSS3学习笔记 之 动态伪类选择器
- CSS3选择器学习笔记
- 学习笔记---css3选择器与jquery选择器大促
- CSS3学习代码之UI伪类选择器
- CSS3学习笔记-选择器
- CSS3选择器学习笔记
- css3学习笔记(二)---选择器(包含部分css2选择器)
- 学习笔记 css3--选择器&新增颜色模式&文本相关
- <学习CSS>第二天笔记-选择器(标签选择器、类选择器、css命名规范、谷歌案例、多类名选择器、id选择器、通配符选择器、伪类选择器)
- css3学习 之 css选择器(结构性伪类选择器)
- CSS3+Html5学习笔记之CSS3多类选择器
- CSS3选择器之学习笔记
- css3学习 之 css选择器(结构性伪类选择器)
- CSS3学习笔记 之 基本选择器