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

相关文章
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
44 2
CSS3 新增伪类有那些
CSS3 引入了多种新伪类,增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择;状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择;动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
|
2月前
|
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
41 0
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
36 0
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
57 0
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
206 0
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
32 7
AI助理

阿里云 AI 助理已上线!

快来体验一下吧。