提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

图解css3：核心技术与案例实战. 2.9　否定伪类选择器

技术 浏览器
2023-03-09 22:20:39 时间

2.9　否定伪类选择器

否定选择器“:not()”是CSS3的新选择器，类似jQuery中的“:not()”选择器，主要用来定位不匹配该选择器的元素。

2.9.1　否定伪类选择器语法

“:not()”是一个非常有用的选择器，可以起到过滤内容的作用。语法如表2-16所示。

否定选择器作用非常大，例如以下选择器表示选择页面中所有元素，除了“footer”元素之外。

:not(footer){...}

有时候常在表单元素中使用，举个实例，给表单中所有input定义样式，除了submit按钮之外，此时就可以使用否定选择器。

input:not([type=submit]){...}

类似这样的选择器在移动端使用也是常见的，例如在Web移动页面中，给表单中的input定义样式，除了单选择按钮之外，代码如下所示。

fieldset input:not([type=radio] {

  margin:0;

  width:265px;

  font-size: 18px;

  border-radius: 0;

  border-bottom: 0;

  border-color: #999;

  padding: 8px 10px;

}

2.9.2　浏览器兼容性

浏览器兼容性如表2-17所示。

2.9.3　实战体验：改变图片效果

本节的实例是通过否定选择器来改变图片墙中图片，用来区分悬浮状态下的效果。

这个实例中采用两种技术，一种是图片的过滤效果（CSS3中的新特性，现在仅Webkit内核浏览器支持，本例子中不详细介绍），第二种技术就是前面介绍的否定选择器“:not”。

当鼠标悬浮在整个图片墙上时，所有图片通过自定义的过滤特性，变成黑白模糊的效果，当鼠标移动到一张图片上时，图片恢复到默认效果，而其他图片保持黑白模糊效果，如图2-47所示。

 

图2-47　否定选择器制作图片墙

制作原理非常简单，接下来一起来看看如何实现。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

  <meta charset="UTF-8">

  <title>:not选择器使用</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>

  </ul>

</body>

</html>

整个案例中，通过“:nth-child()”给每个图片设置filter效果，关键部分是使用“:not()”过滤了除悬浮状态“（:hover）”的图片，其他都变成黑白模糊透明度为70%的效果。

.gallery:hover li:not(:hover){

  -webkit-filter: blur(2px) grayscale(1);

  opacity: .7;

}

不过在写本书时，仅有Webkit内核的浏览器支持filter属性。当浏览器不支持filter，但支持“:not()”，能看到除悬浮状态图片以外的所有图片透明度变成70%；如果对否定选择器也不支持，将看不到任何的效果。

相关文章