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

简介:

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%;如果对否定选择器也不支持,将看不到任何的效果。

相关文章
|
8天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
16 7
|
1月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
1月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
16 1
N..
|
19天前
|
前端开发 UED
CSS选择器
CSS选择器
N..
7 0
|
23天前
|
前端开发
CSS3的几个变形案例……
CSS3的几个变形案例……
14 0
|
24天前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
4 0
|
27天前
|
前端开发
css选择器
css选择器【2月更文挑战第26天】
25 12
|
30天前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
18 1
|
1月前
|
前端开发 开发者
掌握CSS中的常见选择器
掌握CSS中的常见选择器
27 0